28173 sujets

CSS et mise en forme, CSS3

[Résolu] Espace disgracieux sous IE 6

Bonjour,

J'ai fait un menu dont le rendu fonctionne bien sous IE 7 et FF mais pas sous IE 6.

Un espace apparaît dans certaines balises LI. Mais pas dans toutes... et je n'arrive pas à comprendre pourquoi...
Si quelqu'un peut m'aider et surtout m'expliquer. J'ai réuni le HTML et la CSS dans une même feuille pour faciliter la chose.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr-FR" />
<style type="text/css">
<!--
#droite h3 {
color: #000;
font-size: 1em;
margin: 0;
padding: 0.5em 0 0.8em 0;
background: #fff url(images/point.gif) repeat-x bottom;
border-top: 0;
clear: none;
}
#droite ul.menu {
background: #fff;
margin: 0;
padding: 0 0 1em 0;
}

#droite ul.menu li {
background: #fff;

list-style-type: none;
border-top: 0;
padding: 0;
margin: 0;
/* background-image: url(images/puces.gif);
background-position:0% 65%;
background-repeat:no-repeat;
padding-left:15px; */
}
#droite ul li.encours {
padding: 0.2em 0 0.2em 0;
background: #fff url(images/point.gif) bottom repeat-x;
margin: 0;
}
#droite ul.menu li a {
padding: 0.2em 0 0.2em 0; 
background: #fff url(images/point.gif) bottom repeat-x;
display: block;
margin: 0;
}
#droite ul.menu li a:hover {
background: #eee url(images/point.gif) bottom repeat-x;
}

#droite ul.menu li.primomenu {
background: #fff;
list-style-type: none;
border-top: 0;
margin: 0;
/* background-image: url(images/puces.gif);
background-position:0% 65%;
background-repeat:no-repeat;
padding-left:15px; */
}
-->
</style>
</head>
<body>
   <div id="droite">     
      
  <h3>Cat&eacute;gorie 1</h3>
      <ul class="menu">
        <li class="primomenu"><a href="#">Lien</a></li>
        <li><a href="#">Lien</a></li>
        <li><a href="#">Lien</a></li>
        <li><a href="#">Lien</a></li>
        <li><a href="#">Lien</a></li>
      </ul>
	        
  <h3>Cat&eacute;gorie 2</h3>
      <ul class="menu">
        <li class="primomenu"><a href="#">Lien</a></li>
        <li><a href="#">Lien</a></li>
      </ul>
      
  <h3>Cat&eacute;gorie 3</h3>
      <ul class="menu">
        <li class="primomenu"><a href="#">Lien</a></li>
        <li><a href="#">Lien</a></li>
      </ul>
 </div>   
        
   

</body>

</html>


Merci
Modifié par jpsartre (06 Jun 2007 - 22:39)
ceci pourra peut etre t'aider

<!--[if lte IE 6]><style>#encart a{height:1em;}#encart li{height:1em;float:left;clear:both;width:100%}</style><![endif]-->


a adapter pour ton probleme
esperant que cela te serve Smiley cligne


plus
En fait, quand je mets un commentaire conditionnel pour IE, cela marche bien sauf qu'au survol du lien, le bas du bloc à gauche de mon menu disparaît.
Comment éviter ce phénomène sur IE 6 ?

Merci
Modifié par jpsartre (06 Jun 2007 - 00:00)
Bonjour,

Essaye en donnant un width à tes li et li a.

#droite ul.menu li {
background: #fff;
width: 100%;
list-style-type: none;
border-top: 0;
padding: 0;
margin: 0;
}

#droite ul.menu li a {
padding: 0.2em 0 0.2em 0; 
width: 100%;
background: lime;
display: block;
}
Salut,

C'est une problème de hasLayout. Je cite un document de référence :
a écrit :
Another common problem with lists in IE occurs when the content of any li is an anchor with display: block. In these conditions the white space between list items is not ignored and usually displayed as an extra line for each li. One of the methods to avoid this extra vertical space is to give layout to the block anchors. This also has the benefit of making the whole rectangular area of the anchors clickable.

C'est exactement ce qui t'arrive. Donc tu peux, au choix :
- donner le hasLayout à tes li (la liste des propriétés CSS le permettant est dans le doc ci-dessus)
- mettre toutes tes li sur la même ligne dans ton code HTML
- Enlever le {display:block} sur tes liens

A+
Merci pour les liens,

J'ai pu arranger l'espace entre les LI.

Mais en fait, en réduisant l'espace, j'ai eu un menu plus petit que le contenu. Cela m'a permis de remarquer qu'au survol des liens avec IE 6, le bas du bloc de gauche (tout ce qui dépasse du menu) disparaît...

Je sais bien que le code est long. Je l'ai réduit autant que je pouvais. Mais je vais quand même le copier pour que quelqu'un m'explique cette disparition du contenu de gauche et sa réapparition quand on survole le premier lien de droite.

CSS :
/* 
Test
*/

body {
margin: 0;
text-align: center;
background: #fff;
font-family: Arial, Helvetica, sans-serif;
}

a img {
border: 0;
}

.clear {
clear: both;
}
.droite {
text-align: right;
}

 #total {
 clear: both;
margin: 0 auto; 
text-align: left;
	width: 80%;
	background: #fff;
	font-size: 0.8em;
	color: #000;
}

/* Contenu  */
.reference {
padding: 0;
margin: 0;
}

#contenu li{
	list-style-type: square;
	color: #000;
}

#gauche {
float: left;
width: 70%;
}

#gauche img{
float: left;
margin: 0 0.5em 0.5em 0;
border: solid #ddd 1px; 
}
/* 3 colonnes  */

.leftside {
float: left;
width: 49%;
background: #fff;
color: #000;
}
.rightside {
float: right;
width: 50%;
background: #fff;
color: #000;
}
/* droite  */

#droite {
margin-left: 70%;
}

#droite ul.menu {
background: #fff;
margin: 0;
padding: 0 0 1em 0;
}

#droite ul.menu li {
background: #fff;
list-style-type: none;
border-top: 0;
margin: 0;
}
#droite ul li.encours {
padding: 0.2em 0 0.2em 0;
background: #fff url(../images/point.gif) bottom repeat-x;
margin: 0;
}
#droite ul.menu li a {
padding: 0.2em 0 0.2em 0; 
background: #fff url(../images/point.gif) bottom repeat-x;
display: block;
margin: 0;
}
#droite ul.menu  a:hover {
background: #eee url(../images/point.gif) bottom repeat-x;
}

#droite ul.menu li.primomenu {
background: #fff;
list-style-type: none;
border-top: 0;
margin: 0;
}


/* footer  */
#footer {
font-size: 0.7em;
clear: both;
text-align: center;
background: #fff;
padding: 0.3em;
margin-top: 1.5em;
}

#footer ul{
margin: 0;
}
#footer li{
padding: 0 0.3em 0 0.5em;
display: inline;
list-style-type: none;
border-left: solid 1px #666;
}
#footer li.premier{
border: 0;
}


HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr-FR" />
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<!--[if lte IE 6]>
   <link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="fond">



		

<div id="total">



<div id="contenu">
      <div id="gauche">  
      <h2>Lorem ipsum dolor sit amet</h2> 
      <p>Integer varius mollis ipsum. Nulla facilisi. Maecenas a sapien. Suspendisse 
        suscipit consectetuer ligula. Nulla ut odio. Curabitur non nulla eget 
        nulla lacinia eleifend.</p>
      <h3>Lorem Ipsum</h3>	
         
        
      <p>Integer varius mollis ipsum. Nulla facilisi. Maecenas a sapien. Suspendisse 
        suscipit consectetuer ligula. Nulla ut odio. Curabitur non nulla eget 
        nulla lacinia eleifend. : </p> 
	  <ul>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
      </ul>
       <h3>Lorem Ipsum</h3>	
         
        
      <p>Integer varius mollis ipsum. Nulla facilisi. Maecenas a sapien. Suspendisse 
        suscipit consectetuer ligula. Nulla ut odio. Curabitur non nulla eget 
        nulla lacinia eleifend. : </p> 
	  <ul>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
      </ul>
	    <h3>Lorem Ipsum</h3>	
         
        
      <p>Integer varius mollis ipsum. Nulla facilisi. Maecenas a sapien. Suspendisse 
        suscipit consectetuer ligula. Nulla ut odio. Curabitur non nulla eget 
        nulla lacinia eleifend : </p> 
	  <ul>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
        <li>Maecenas a sapien</li>
      </ul>
	  <div class="leftside"> 
        <h3>Lorem Ipsum</h3>  
        <p><img src="references/images/test.gif" alt="test" width="100" height="67" /> 
          Integer varius mollis ipsum. Nulla facilisi. Maecenas a sapien. Suspendisse 
          suscipit consectetuer ligula. Nulla ut odio. Curabitur non nulla eget 
          nulla lacinia eleifend</p>
		  
        <p class="clear">Nulla facilisi <a href="#" title="test">Curabitur</a></p>
        </div>
		
      <div class="rightside"> 
        <h3 class="clear">Lorem Ipsum</h3>  
        <p><img src="references/images/test.gif" alt="test" width="100" height="67" /> 
          Integer varius mollis ipsum. Nulla facilisi. Maecenas a sapien. Suspendisse 
          suscipit consectetuer ligula. Nulla ut odio. Curabitur non nulla eget 
          nulla lacinia eleifend</p>
       
        <p class="clear">Nulla facilisi <a href="#" title="test">Curabitur</a></p>
</div>
             </div>
  <div id="droite">
     
        
      <h3>Pellentesque hendrerit</h3>
      <ul class="menu">
        <li class="primomenu"><a href="#">Suspendisse suscipit</a></li>
		<li><a href="#">Suspendisse suscipit</a></li>
		<li><a href="#">Suspendisse suscipit</a></li>
		<li><a href="#">Suspendisse suscipit</a></li>
		<li><a href="#">Suspendisse suscipit</a></li>
      </ul>
      <h3>Pellentesque hendrerit</h3>
      <ul class="menu">
        <li class="primomenu"><a href="#">Suspendisse suscipit</a></li>
		<li><a href="#">Suspendisse suscipit</a></li>
      </ul>
      <h3>Pellentesque hendrerit</h3>
      <ul class="menu">
        <li class="primomenu"><a href="#">Suspendisse suscipit</a></li>
		<li><a href="#">Suspendisse suscipit</a></li>
      </ul>
    
        
      <h3>Pellentesque hendrerit</h3>

        
      <p>Suspendisse suscipit consectetuer ligula.</p>
	    
      <p class="dernier"><a href="prestations/professionnels/">Suspendisse suscipit</a></p>

</div>

</div>
</div>

    <div id="footer"> 
      <ul>  
    <li class="premier">Test</li>
        <li><a href="informations/" accesskey="8">consectetuer</a></li>
        <li><a href="contact/">consectetuer</a></li>
      </ul>
      
  
</div>

</body>

</html>


Si quelqu'un peut m'expliquer...

Merci d'avance
Salut,

Le problème vient du fait que tu confonds apparemment flottants et position absolue. Je m'explique :
Tu veux mettre ta div#gauche à gauche de ta div#droite et les faire occuper respectivement 70% et 30% de la largeur. Très bien. Voilà comment tu as fait :
#gauche {
float: left;
width: 70%;
}
#droite {
margin-left: 70%;
}

Ben non Smiley smile Si tu veux que div#droite se positionne à la suite de div#gauche, la seule chose que tu as à faire c'est de lui dire de se mettre elle aussi "à la queue" (float:left). Elle se positionnera automatiquement après div#gauche, donc automatiquement à 70%.
Là, tu traites div#gauche (un flottant) comme si elle était positionnée en absolu et que les autres éléments risquaient de passer "dessous" (d'où la marge que tu avais appliqué à div#droite). Une marge de 70% sur un élément non floatté, suivant un élément floatté, on dirait bien que tu as fait paniquer notre bon vieux grand-père d'ie6. Smiley cligne

A+
Modifié par marcv (06 Jun 2007 - 09:18)
Merci beaucoup pour la réponse.

C'était bien une réponse sur le fond dont j'avais besoin Smiley smile
Merci d'avoir pris le temps de trouver le problème.
Je vais voir tout cela ce soir pour bien comprendre.

A tout'
Vraiment merci d'avoir pris le temps de trouver le problème de fond.
Surtout que ce n'est pas la première fois que j'utilise ce 
FLOAT: RIGHT;
dans ce contexte. Dans quel monde vivais-je ? Smiley confused
Du coup, lorsque j'utilisais des tailles relatives pour mes blocs, j'avais le cas de deux images qui se chevauchaient au lieu de redescendre dans le flot. J'en étais même à fixer les tailles de mes blocs pour éviter ce phénomène et à ne plus utiliser les tailles relatives.
Maintenant, je vais corriger les sites concernés Smiley confus

Merci a tous et particulièrement à marcv,
en fait IE interprète les espaces dans les UL donc si tu as des espaces ou des retours chariots entre tes LI cela va en générer graphiquement
Sujet clos
Aller à