28173 sujets

CSS et mise en forme, CSS3

Bonjour,

je ne sais pas si ma "trouvaille" est connue, j'ai cherché sur le forum mais n'ai pas trouvé de solution alors j'ai creusé seul...peux etre cela peut il aider?

suite a une visite sur votre forum j'ai trouvé des infos concernant le contrôle css des balises <hr /> notamment cet article : supprimer les marges de la balise hr sous ie

dans mon cas le hr devait avoir un margin-left par rapport au bord du div conteneur et malgré l'application des conseils de l'articles sous IE la marge ne correspondait pas a celle voulue, cela ressemblait a la "double marge " des div en float...
je me suis rendu compte que la seule différence par rapport a l'exemple était le fait que je donnais une largeur au hr (width: 500px;).

et la je ne sais pas pourquoi mais j'ai pensé à mettre la propriété : "text-align: left;"

comme par enchantement plus de problème...après quelques tests je pense pouvoir dire (je suis loin d'etre expert) que IE donne propriété a la balise hr text-align: center;. on le voit tout de suite si on met un width 50px, sur safari avec le code donné dans l'article le hr fait bien 50px et se trouve a gauche tandis que sur IE il fait 50 px mais se trouve au centre du conteneur.

peux etre que cette astuce est connue? en tout cas voici mon code css:




hr {
 display:block;
 width:500px;
 height: 1px;
 margin: 18px 0 20px 30px;
 _margin: 11px 0 20px 30px;/*adaptation du code source initiale avec le fameux truc des 7 px*/
 padding: 0;
 color: blue;
 background-color: blue;
 border: 0;
 text-align:left;
 }