le tag HR

[netootel]

Bonjour à tous,

Je viens de valider la page d'accueil de mon site en utilisant les validateurs du W3C.

Il se trouve qu'en suivant leurs corrections, j'ai du modifier un tag HR de cette façon :

<HR style="color: #FA3232;" width=82px size=2px align=left>

alors qu'auparavant j'avais :

<HR color=#FA3232 width=82px size=2px align=left>

Seulement voilà, sous IE tout va bien et sous Mozilla la couleur n'est pas respectée, le HR est gris.

Que dois-je faire ?

Suivre les indications du W3C et avoir un design apauvri ou laisser mon ancien code qui produit le résultat attendu sous les 2 navigateurs ?

[Findel]

Le mieux serait d'utiliser une feuille de style et de lui coller :

hr { width:82px; border:1px solid #FA3232; }

Car c'est la couleur de la bordure qui devrait te permettre de changer la couleur de la ligne dessinée par le HR

[netootel]

C'est chose faite !

A présent IE et Mozilla sont en phase.

Merci.

[Raphael]

http://www.sovavsiti.cz/css/hr.html

[Xavier]

Les divers navigateurs du marchés construisent en effet très différemment leurs HR.

Pour l'un la couleur appliquée par défaut à la barre est celle de la bordure, pour un autre celle de l'arrière-plan, ou encore la couleur... bref la recette pour réussir une barre horizontale c'est de définir toutes ces propriétés afin d'écraser toutes les valeurs par défaut

[LaurentDenis]

Autre solution, plus simple : utiliser uniquement les effets de bordures sur les autres éléments pour obtenir le résultat visuel attendu via CSS, et mettre les hr en display:none; ou mieux en visibility: hidden.

Typiquement, la ligne horizontale sera obtenue par un border-top ou un border-bottom du div conteneur.