FAQ version Beta 0.5
Questions diverses
Styler la balise <hr /> sous Internet Explorer
La balise <hr> (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" grâce à la propriété clear qui lui permet de gérer les débordements dûs aux positionnements flottants.
1) 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 :
* http://www.sitepoint.com/examples/hr/ [en]
* http://www.sovavsiti.cz/css/hr.html [en]
* http://www.saila.com/usage/tips/defn.shtml?hr [en]
* http://www.blakems.com/experimental/hr/ [en]
* http://www.nanoum.net/blog/4_apparence_hr.html [fr]
* http://bitesizestandards.com/bites/styling-horizontal-rules-with-css [en]
* http://www.hixie.ch/tests/evil/mixed/hrbrstyles.html [en]
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.
2) 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.
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.
L'une de ses utilisations courantes est de servir de "spacer" grâce à la propriété clear qui lui permet de gérer les débordements dûs aux positionnements flottants.
1) 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 :
* http://www.sitepoint.com/examples/hr/ [en]
* http://www.sovavsiti.cz/css/hr.html [en]
* http://www.saila.com/usage/tips/defn.shtml?hr [en]
* http://www.blakems.com/experimental/hr/ [en]
* http://www.nanoum.net/blog/4_apparence_hr.html [fr]
* http://bitesizestandards.com/bites/styling-horizontal-rules-with-css [en]
* http://www.hixie.ch/tests/evil/mixed/hrbrstyles.html [en]
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.
2) 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.
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.