28173 sujets

CSS et mise en forme, CSS3

[Résolu] Un lien qui passe à la ligne sur IE6

Bonjour à tous !!!

voici la page d'accueil d'un site que je développe : http://www.neolcreations.com. Le menu est construit sur le modèle de ce tutoriel : http://www.stunicholls.myby.co.uk/menus/flickerfree_mk3.html

J'ai un soucis sous Internet Explorer 6 : la largeur de la page ne contient que 3 images/liens au lieu de 4 contrairement à un affichage normal (IE7,FF 2.0). Je ne comprends pas pourquoi j'ai ce décalage...

Voici le morceau de CSS incriminé : 
#menu {
	display:block; 
	height:550px; 
	width:580px; 
	background-color:#000;
	position:relative;
	left: 50%; 
	margin-left: -290px; /* moitié de la largeur */
	padding:20px 0px 0px 0px;
	border:1px solid #ccc;
}

#menu ul {margin:0; padding:0; list-style-type:none;}
#menu li {float:left; margin:5px 20px 25px 20px; display:block; width:105px; border:none; /*1px solid #FFCC00;*/}

#menu li.list1  	{background:#000 url(../ressources/images/menu/ICONE_bulo.jpg) no-repeat;}
#menu li.list2  	{background:#000 url(../ressources/images/menu/ICONE_crapo.jpg) no-repeat;}
#menu li.list3  	{background:#000 url(../ressources/images/menu/ICONE_luminaires.jpg) no-repeat;}
#menu li.list4  	{background:#000 url(../ressources/images/menu/ICONE_toto.jpg) no-repeat;}
#menu li.list5  	{background:#000 url(../ressources/images/menu/ICONE_seascie.jpg) no-repeat;}
#menu li.list6  	{background:#000 url(../ressources/images/menu/ICONE_spiro.jpg) no-repeat;}
#menu li.list7  	{background:#000 url(../ressources/images/menu/ICONE_zapateo.jpg) no-repeat;}
#menu li.list8	{background:#000 url(../ressources/images/menu/ICONE_amazone.jpg) no-repeat;}
#menu li.list9  	{background:#000 url(../ressources/images/menu/ICONE_margo.jpg) no-repeat;}
#menu li.list10 	{background:#000 url(../ressources/images/menu/ICONE_ondulo.jpg) no-repeat;}
#menu li.list11 	{background:#000 url(../ressources/images/menu/ICONE_realisations.jpg) no-repeat;}
#menu li.list12	{background:#000 url(../ressources/images/logo.jpg) no-repeat; padding-top:152px;}

#menu a {
	display:block; 
	width:105px; 
	padding-top:152px; 
	height:0; 
	text-decoration:none; 
	text-align:center; 
	color:#ccc; 
	font:bold 0.9em Arial;
	font-variant: small-caps;
}


et la partie HTML pour info : 
<div id="menu">
<ul>
<li class="list1"><a id="item1" href="#nogo" title="bulo">Bulo</a></li>
<li class="list10"><a id="item10" href="ondulo.htm" title="ondulo">Ondulo</a></li>
<li class="list2"><a id="item2" href="#nogo" title="crapo">Crapo</a></li>
<li class="list3"><a id="item3" href="luminaires.htm" title="luminaires">Luminaires</a></li>
<li class="list4"><a id="item4" href="toto.htm" title="toto">Toto</a></li>
<li class="list8"><a id="item8" href="#nogo" title="amazone">Amazone</a></li>
<li class="list6"><a id="item6" href="spiro.htm" title="spiro">Spiro</a></li>
<li class="list7"><a id="item7" href="zapateo.htm" title="zapateo">Zapateo</a></li>
<li class="list5"><a id="item5" href="#nogo" title="seascie">Seascie</a></li>
<li class="list9"><a id="item9" href="margo.htm" title="margo">Margo</a></li>
<li class="list11"><a id="item11" href="#nogo" title="realisations">Realisations</a></li>
<li class="list12"></li>
</ul>
</div>


Merci de votre aide !
Modifié par Mucsy (29 Nov 2006 - 23:23)
Bonsoir !

M'est avis qu'il s'agit là d'un problème de marge doublée à cause d'un flottant.
Pour t'en assure essaye ceci : 
#menu li {
float:left; 
margin:5px 20px 25px 20px; 
display:[#blue]inline-[/#]block; 
width:105px; 
border:none; /*1px solid #FFCC00;*/
}

Si mon intuition s'avère exacte, alors il s'agit effectivement de ce problème. Smiley murf
Cependant cette instruction n'est pas valide XHTML 1 Strict, il faudra donc la passer en commentaire conditionnel pour IE 6. Smiley cligne
Modérateur
bonjour ,

<edit> oups , croisement involontaire , grillé ! Smiley smile </edit>

il y a au moins 2(3) choses qui provoque ce decallage.

1) le bug de double marge sur les elements flottant dans IE , un display:inline en plus , suffit a eviter ce defaut et est sans incidence sur le rendu visuelle , la regle float prenant le dessus de toutes façon.

2/3) la taille des polices données dans body.
un font-size:90% ; au lieu de 0.9em serait peut-etre plus adapté.
la longueur des textes si l'on augmente la taille d'affichage va augmenter la largeur des item de list , dans IE 6 la regles width:106px , equivaut a min-width:106px , peut-etre faut-il "contenir " ce defaut avec un overflow-x:hidden; en commentaire conditionnel.

bonne continuation.

GC
Modifié par gcyrillus (29 Nov 2006 - 23:18)
Modérateur
"double margin bug" , c'est un bug de Internet Explorer qui apparait sur les element flottant , tres classique et quasiment le premier que l'on remarque ou qui prends la tête . Smiley smile

en mettant un element en float a droite avec une marge a droite de 10pixels , dans IE elle se transforme a 20pixels , idem si on fait float:left; margin-left:xx;

Le display:inline remedie a ce defaut lorsqu'il apparait.

++
Sujet clos
Aller à