Supprimer les marges de la balise HR sous IE

élucubrations XHTML, CSS
et Standards web

Recherche par mot-clés

CSS · XHTML · Standards W3C · Webdesign · Accessibilité · Référencement · JavaScript · PHP · Humour

AlsaQuiz

A retenir

Syndication

Rédacteurs du blog

Partenaires

Poster

La balise <hr> [fr] (ou <hr /> en XHTML), qui signifie "horizontal rule", est une règle horizontale servant de séparation.

L'une de ses utilisations courantes est de servir de "spacer" [fr] grâce à la propriété clear [fr] qui lui permet de gérer les débordements dûs aux positionnements flottants.

Styler la balise HR

Le premier problème à contourner est alors celui de la décoration de la balise <hr> puisque les différents navigateurs ne sont pas d'accord entre eux.
Certains liens anglophones sont alors bien utiles :

On y apprend, entre autre, que la couleur de la règle se définit soit par la propriété color, soit par background-color.

Les marges de HR

Cependant, un problème de marge apparaît irrémédiablement sur Internet Explorer : quoi que l'on fasse il reste un espace entre la règle et le contenu qui la précède (figure 1).

Voici le code employé ainsi que le rendu sur IE et les autres navigateurs :

CSS :
div {background: green; color: white}

hr {
height: 1px;
margin: 0;
padding: 0;
color: #F00;
background-color: #F00;
border: 0;
}

XHTML :
<div>texte</div>
<hr />

Aperçu sour IE

Aperçu sous Geckos

Malgré différents essais et un post sur le forum [fr], cette marge haute semble incompressible.
Cette impression est renforcée par une autre lecture [en] qui confirme qu'il s'agit d'un bug IE et que la solution serait d'englober la balise <hr /> dans un conteneur <div>.

Une piste à suivre

Une autre méthode semblerait porter ses fruits dans une certaine mesure : appliquer des marges verticales négatives de la hauteur d'un demi caractère de référence.

CSS :
hr {
height: 1px;
margin: -0.5em 0;
padding: 0;
color: #F00;
background-color: #F00;
border: 0;
}

Cette méthode réduit l'espace supérieur sur IE (pas l'espace inférieur), sans - curieusement - modifier le comportement sur les geckos.

A tester sur d'autres navigateurs pour confirmer ou non la pertinence de cette technique...

Par Raphael GOETTER - samedi 27 novembre 2004 à 15:11

Astuces - #92 - Lu 15755 fois - Intérêt du billet: 2.17(29) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le lundi 29 novembre 2004 à 11:13, par Xavier :: site :: #

<hr> se comporte sous IE comme si l'on avait 2 éléments imbriqués l'un dans l'autre. Le style CSS appliqué à <hr> toucherait l'élément intérieur, l'élément extérieur aurait des caractéristiques figées, donc ne pouvant être contrôlées. Parmi ces caractéristiques notons un padding top et bottom de 7px. Notons également que l'élément intérieur est inline par défaut, sur une ligne dont line-height est aussi de 7px.
Vous pouvez tester dans ce contexte que pour un élément <hr> de moins de 7px, la propriété vertical-align a un effet.

Pour résoudre le problème (le pb des marges), le plus simple consiste a transformer l'élément en block, et à lui imposer des marges négatives de 7px. Voici l'exemple repris de l'article avec gestion de l'espace supérieur et inférieur (marges négatives pour IE seulement afin de ne pas perturber les autres navigateurs) :

CSS :
div {background: green; color: white}

hr {
display:block;
height: 1px;
margin: 0;
_margin: -7px 0;
padding: 0;
color: #F00;
background-color: #F00;
border: 0;
}

XHTML :
<div>texte</div>
<hr />
<div>texte</div>

"Les pistes à suivre" de cet article comporte la bonne idée de jouer sur les marges, avec toutefois des inexactitudes :
- les marges à compenser ne sont pas en em, il suffit pour s'en convaincre de modifier la taille du texte à l'affichage,
- l'impression qu'il n'est pas possible de réduire la marge inférieure est due au fait que l'élément est inline. Pour vérifier, on peut jouer sur la propriété vertical-align, ou utiliser un élément de hauteur supérieure ou égale à 7px, ou enfin passer en display block.

Le lundi 29 novembre 2004 à 11:28, par Raphael :: #

Merci pour ces précisions utiles, Xavier.
Peux-tu me donner tes sources ? (je n'ai rien trouvé de mon côté)

Le lundi 29 novembre 2004 à 23:31, par Xavier :: site :: #

Sur ce coup là je n'ai pas d'autres sources que mes propres tests et recherches, et comme je ne les ai jamais publiés... je n'ai malheureusement pas de liens à te proposer.

En synthèse mon parcours fût le suivant :

1/ comme toi j'ai été surpris de voir que l'espace inférieur est récalcitrant.

2/ par hasard je me suis aperçu que le comportement de l'espace inférieur variait avec effet de seuil en fonction de l'épaisseur de la <hr>

3/ ce comportement est typique de l'élément inline (il y a un effet de seuil lorsque l'élément inline atteint ou dépasse la line-height de la ligne), et j'y ai rapidement pensé.

4/ je cherche à vérifier que l'élément est inline en faisant varier vertical-align qui ne s'applique qu'aux éléments in-line. Vérification concluante.

5/ je conforte l'intuition en forçant l'élément à display:block. Le comportement de <hr> devient alors celui d'un block classique. Nous revenons en terrain connu, tout va bien.

6/ il suffit de quelques tests par approches successives pour déterminer la valeur des paramètres, la nature des unités...

7/ proposer un modèle qui satisfait aux différentes découvertes n’est plus très difficile. Pour l'instant je ne l'ai pas encore mis en défaut. Il n'y a pas de certitude, mais ce modèle est suffisant pour un usage simple des <hr> me semble-t-il.

Faites-moi savoir si vous avez des problèmes avec ces hypothèses.

Le lundi 29 novembre 2004 à 23:37, par Raphael :: #

Eh bien voilà un protocole qui me paraît des plus concluants

Le lundi 31 janvier 2005 à 13:48, par [WXR] :: #

même si Xavier a trouvé tout seul (et je l'en félicite et le remercie) voilà un site où tout est expliqué :
www.ultra-fluide.com/ress...

bien bien bien au boulot...

Le jeudi 3 février 2005 à 18:00, par Xavier :: site :: #

Oui WXR c'est vrai, et ça me fait plaisir que tu le remarques, car l'auteur du site que tu mentionnes n'est autre que le Xavier qui a trouvé tout seul !

Le vendredi 8 juillet 2005 à 12:33, par trouille2 :: #