Hum hum, sympathique accroche n'est-ce pas ? J'aurai pu être plus vulgaire et dire ta mère, ok c'est lamentable les rimes en ère. Je suis en train de bosser sur un site (normal c'est mon job) et dans l'ancien temps (c'est à dire avant d'utiliser CSS correctement), pour faire une séparation entre différents textes j'utilisais parfois une barre de couleur en gif créée dans la douleur grâce à Photoshop avec tous les inconvénients que ça engendre (taille et surtout couleur fixe, poids etc). Terminé le temps là. CSS permet de styler l'élément hr de façon à ce qu'il ressemble à une barre de couleur. A force d'essais, je suis tombé sur un code qui donne à peu près la même apparence à hr dans les navigateurs récents que sont IE6 Windows, IE5 Mac, Netscape 7, Mozilla/Firebird, Opera, Safari (et donc je présume Konqueror). Cependant, il y a un truc que je n'ai pas encore solutionné, c'est les différents rendus des valeurs affectées aux padding et margin de hr dans les différents navigateurs et ça c'est pas du gâteau à gérer. Ca va dépendre du reste du design en fait...
J'en profite pour apporter un début d'explication au mystère des !important utilisés par le staff Macromedia dans les feuilles de style de leur site. Dans les CSS Macromedia, souvent on retrouve la même propriété déclarée 2 fois mais avec des valeurs différentes, et la première est suivie des mots clefs !important. Par exemple :
div.machin {
height: 10px !important;
height: 20px;
}En fait la première valeur suivie de !important n'est pas prise en compte par IE6 Win et c'est la seconde propriété qui est appliquée. A priori, tous les autres navigateurs récents appliquent la première. Intéressant comme hack. Je ne sais pas trop si ça dénature le rôle de !important ?
Pour en revenir à mon élément hr, voici le code :
hr {
color: #AFADDE;
background: #AFADDE;
height: 10px !important;
height: 200px;
padding: 0;
margin: 0;
border: 0;
}J'ai laissé la propriété height 2 fois avec la première suivie de !important pour que les possesseurs de IE6 Win puissent voir l'effet. Le résultat visible en ligne.
Joint