[RÉSOLU] - Faire une ligne de 1px de hauteur sous IE

Re bonjour!
je ne pensais pas revenir aussitot, mais bon depuis un moment je suis dessus :
je voudrais faire l'équivalent d'une <hr> d'un pixel de hauteur, voici mon code:

div#hr {
  height: 1px;
	line-height: 0px;
	font-size: 0px;
	background-color:#8CA0AD;
	margin: 0 0 0 150px;	
}

j'ai fait une recherche et suivi les instructions et tout et tout. ça marche nickel sur Mozilla par ex. pas sur IE la hauteur n'est pas de 1px mais un peu plus. je pensais à un padding à 0, mais ça ne fonctionne pas non plus.
moi pas comprendre....

un coup de main serait donc le bienvenu
merci!

Salut ^^
J'ai pas d'experience mais ton "div#hr" n'est pas tres jojo essaye peut-etre:

div #cequetuveuxetoutuleveut (html)

et dans la feuille de style:

#cequetuveuxetoutuleveut hr {
la position
la grosseur
la couleur
etc ...
}


ps: tu ne devrais garder le nom de "div" que dans le code ^^
l'entete le pied le contenu etc ... sont tous dans des "div"

div #entete = #entete
div #menu = #menu
div #contenu = #contenu
div #footer = #pieddepage
Modifié par webphn (16 Sep 2005 - 15:45)

Bonjour,
pourquoi ne pas appeler un chat un chat ? une ligne de 1px est un hr, pas un div class="hr" ou quelque chose de ressemblant !

QuentinC a écrit :
pourquoi ne pas appeler un chat un chat ?

Parce qu'un vrai <hr> est une horreur à styler sous IE

Bonjour,

Pourquoi ne pas jouer avec les bordures tout simplement.


Appliquer un border-bottom à l'élément, ou un border-top à l'élément au dessous. Il faudrait voir le contexte.

#mon-div-bordé {border-bottom : 1px solid #8CA0AD;}

Pour styler un <hr /> au pixel près :

div.separateur {
   clear: both; /* si besoin est */
   background: transparent url("separateur.gif") bottom left repeat-x;
   width: 700px;
   height: 1px;
   padding: 0;
   margin: 0;
}

div hr {
   position: absolute;
   top: -999em;
   left: -999em;
}

<div class="separateur"><hr /></div>

Ça a été discuté ici :
http://forum.alsacreations.com/topic.php?fid=4&tid=493
Modifié par Stephan (16 Sep 2005 - 17:22)

Bonjour à tous,
ça marche super merci Stephan! en effet, je n'avais pas trouvé le post concernant les HR.....ce qui est embetant, c'est tout ce code pour une petite ligne de mercredi.
merci IE!

question subsidiare:
que signifie

   top: -999em;
   left: -999em;

comme ça fonctionne plutot? -999 pourquoi?

miltonis a écrit :

que signifie

   top: -999em;
   left: -999em;

On positionne l'élément très loin en haut et à gauche alors il n'est plus visible dans la zone délimitée pas l'écran laissant place à l'image en background qui joue le rôle du séparateur. Lorsque CSS est désactivé, le <hr /> reprend sa place et l'image en background disparait. C'est une méthode pour masquer des éléments.

Une autre façon de faire serait d'insérer l'image du séparateur en dur dans le code en n'oubliant pas de lui donner un attribut alt="--". L'image du séparateur sera présente même si CSS est désactivé. Notez que cette façon de faire est tout à fait acceptable dans un monde ou l'on prône la séparation du contenu et de la présentation. En effet, le rôle de l'image est bien celui d'une règle horizontale. Dans le même ordre d'idées on coderait une puce avec un attribut alt="*" ou un séparateur de liens adjacents alt="|" quoique l'usage des séparateurs de liens adjacents n'est plus encouragé.
Modifié par Stephan (17 Sep 2005 - 18:24)

tout compris,
MERCI !
Modifié par miltonis (17 Sep 2005 - 22:21)

Salut,
Si tu tenais absolument à faire marcher ton code initial, il faudrait ajouter :

overflow:auto;

c'est un bug de IE pour faire une div de 1px de haut, déjà discuté sur ce forum