Marge doublée sous IE6 !

Bonjour,

J'ai une boite dans laquelle on trouve 2 listes cote à cote avec du float.
Je ne peux pas appliquer de padding à ma boite principale mais j'ai besoin d'un espacement de 8px à droite et à gauche de mon contenu.
J'applique donc une marge à gauche de la premiere liste et une à droite de la seconde liste.

Sous IE7 et FF2 aucun probleme.

Sous IE6 la marge de gauche est doublée quoi que je face !

A quoi est du ce comportement ?

Code CSS :

div#selection-t {margin:4px 0 0 0; padding:0 8px; height:24px; background-color:#FF6400; background-image:url(crat.gif);}
div#selection-c {margin:0; padding:0; width:100%;/*layout*/ background-color:#FF6400; background-image:url(crac.gif);}
div#selection-p {height:11px; background-color:#FF6400; background-image:url(bte/crap.gif);}

ul#top {float:left; width:327px; margin:0 0 0 8px; padding:3px 0; list-style-type:none;}
#top li {float:left; width:109px; line-height:11px; margin:0; padding:0; background:url(pt.gif) no-repeat 0px 7px; text-indent:7px;}
ul#voir {margin:0 8px 0 327px; padding:3px 0; list-style-type:none; background:url(drv.gif) no-repeat 8px 10px;}
#voir li {line-height:11px; margin:0; padding:0 0 0 16px; background:url(pt.gif) no-repeat 16px 7px; text-indent:7px;}

Code XHTML :

<div id="selection-t"></div>
<div id="selection-c">
	
	<ul id="top">
		<li><a href="#">Site 1...</a></li>
		<li><a href="#">Site 2...</a></li>
		<li><a href="#">Site 3...</a></li>
		<li><a href="#">Site 4...</a></li>
		<li><a href="#">Site 5...</a></li>
		<li><a href="#">Site 6...</a></li>
		<li><a href="#">Site 7...</a></li>
		<li><a href="#">Site 8...</a></li>
		<li><a href="#">Site 9...</a></li>
		<li><a href="#">Site 10...</a></li>
		<li><a href="#">Site 1...</a></li>
		<li><a href="#">Site 2...</a></li>
		<li><a href="#">Site 3...</a></li>
		<li><a href="#">Site 4...</a></li>
		<li><a href="#">Site 5...</a></li>
		<li><a href="#">Site 6...</a></li>
		<li><a href="#">Site 7...</a></li>
		<li><a href="#">Site 8...</a></li>
		<li><a href="#">Site 9...</a></li>
		<li><a href="#">Site 10...</a></li>
		<li><a href="#">Site 1...</a></li>
		<li><a href="#">Site 2...</a></li>
		<li><a href="#">Site 3...</a></li>
		<li><a href="#">Site 4...</a></li>
		<li><a href="#">Site 5...</a></li>
		<li><a href="#">Site 6...</a></li>
		<li><a href="#">Site 7...</a></li>
		<li><a href="#">Site 8...</a></li>
		<li><a href="#">Site 9...</a></li>
		<li><a href="#">Site 10...</a></li>
	</ul>
	
	<ul id="voir">
		<li><a href="#">Site 1...</a></li>
		<li><a href="#">Site 2...</a></li>
		<li><a href="#">Site 3...</a></li>
		<li><a href="#">Site 4...</a></li>
		<li><a href="#">Site 5...</a></li>
		<li><a href="#">Site 6...</a></li>
		<li><a href="#">Site 7...</a></li>
		<li><a href="#">Site 8...</a></li>
		<li><a href="#">Site 9...</a></li>
		<li><a href="#">Site 10...</a></li>
	</ul>

</div>
<div id="selection-p"></div>

Arf encore un bug !

Ok pour le padding mais le probleme est que j'ai un width donc si je place un padding je tombe sur le probleme de difference de largeur de boite avec IE6

Il y a une autr esolution ?

Ben au pire tu mets le tout dans un commentaire conditionnel pour IE < 7 non ?

oui mais je voudrais faire sans dans la mesure du possible.

Par contre je ne comprend pas, j'ai transféré la marge dans le pading, la boite a un width et sous IE6 je n'ai pas le bug de largeur de boite. Comment est ce possible ??

la solution : display:inline


.myElement {
float:left;
margin-left:50px; /* donc sous IE6/7 on aura 100px */
display:inline; /* corrige le bug */
}

me demandez pas pourquoi le display:inline, corrige ce problème mais au moins ça évite de se faire chier avec 50000 calculs

Gatsu35 a écrit :
la solution : display:inline

Ah oui ! Je l'avais pourtant noté celui-là ! Merci du rappel !

salut,

neutronweb a écrit :
Arf encore un bug !

Ok pour le padding mais le probleme est que j'ai un width donc si je place un padding je tombe sur le probleme de difference de largeur de boite avec IE6

Cela ne devrait pas arriver, si tu travailles en mode de respect strict des standards

Thomas D. a écrit :
salut,
Cela ne devrait pas arriver, si tu travailles en mode de respect strict des standards

Il y a un truc super sur le web qu'on appel IE6 et même en respectant les standard il comporte toujours son lot de bugs habituels

- 3px float (left ou right)
- double margin-left float bug (idem pour la droite)
- Backgrounds qui disparaissent (une application du haslayout corrige)
- contenus qui pete tout si on met un font-style : italic
- position:relative merdique parfois
- :hover qui ne marche que sur les A
- contenus dupliqués si trop de commentaires HTML dans la page

et j'en passe

neutronweb a écrit :
Ok, et en mode strict le model de boite correcte fonctionne aussi sous IE 5.x ?

le modele de boite W3C ne fonctionne que à partir de IE6, le mode de rendu strict n'existe que sous IE6, IE5.0 et 5.5 ne sont qu'en mode de rendu quirks (donc modele de boite microsoft moisi)