IE6 et haslayout [résolu]

Bonjour,

je sollicite la communauté pour un problème qui a probablement déjà été traité mais dont je n'ai pas trouvé la réponse malgrè mes recherches... avec toutes mes excuses si par malheur je ne respectais pas la charte d'utilisation du forum...

je commence par le code :

  
   <div id="menu_gauche">
   <ul>
        <li> <a href="mutuelle.html">Santé et bien-être</a></li>
        <li> <a href="billetterie.html">Loisirs</a></li>
        <li> <a href="avantages.html">Avantages, réductions</a></li>

        <li> <a href="caissedesolidarite.html">Caisse de solidarité</a></li>
        <li> <a href="infopratiques.html">Infos pratiques</a></li>
        <li> <a href="votreavis.html">Votre avis nous intéresse</a></li>
    </ul> 
   </div>

body {
	background-color: #efefef;
	font-family		: "Trebuchet MS", Arial, Helvetica, sans-serif;
}



/* MENU GAUCHE ---- MENU GAUCHE ---- MENU GAUCHE ---- MENU GAUCHE ---- MENU GAUCHE ---- MENU GAUCHE ---- MENU GAUCHE */ 

#menu_gauche {
	position: relative;
	width	: 160px;
	top		: 13px;
	left	: 20px;
}

/*DEFINITION DU STYLE DE LISTE DANS LE MENU GAUCHE : */

#menu_gauche ul {
	display			: block;
	/*width: 100%;*/
	
	margin-top		: 0px;
	margin-right	: 0;
	margin-bottom	: 10px;
	margin-left		: 0px;
	font-weight		: bold;
	font-size		: 12px;
	padding			: 0px;
	vertical-align	: bottom;
	list-style-type	: none;
}

/*DEFINITION DU STYLE DE LIEN INCLUT DANS UNE LISTE DANS LE MENU GAUCHE : */

#menu_gauche ul li a {
	display				: block;
	background-color	: #c93482;
	color				: #FFF;
	font-family			: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size			: 12px;
	padding-left		: 12px;
	margin-top			: 10px;
	margin-right		: 0;
	margin-bottom		: 0px;
	margin-left			: 0;
	padding-top			: 2px;
	background-image	: url(images/puce_carre_blanc.gif);
	background-repeat	: no-repeat;
	background-position	: left;
	text-decoration		: none;
}

#menu_gauche ul a:hover {
	background-image	: url(images/puce_fleche_blanc.gif);
	background-repeat	: no-repeat;
	background-position	: left;
}

page visible ici

voilà un bête menu tout ce qu'il y a de plus simple et validé w3c (html et css)

imaginez ma surprise lorsque je l'ai finalement testé sur IE6...

j'ai bien compris le principe des commentaires conditionnels, mais je ne vois pas quel est (sont) les éléments de code css qui peuvent bien poser problème à ce cher IE6.

s'il ne s'agissait que d'histoires de padding, j'aurais pu "gérer" mais là, il m'a mis KO.

si une âme compatissante pouvait jeter un oeil sur ce code, je lui en serait vraiment reconnaissant...
Modifié par SeB_59 (24 Jun 2010 - 15:06)

Salut,

Je ne suis pas spécialiste (et d'ailleurs pas IE-friendly, et j'assume), mais je crois que tu es ici face à un problème de haslayout que tu peux résoudre facilement en rajoutant par exemple une règle

width = 100%;

aux éléments concernés.
Au vue de ton code (commentaire), c'est ce que tu avais essayé mais il faut appliquer cette règle à :

#menu_gauche ul li a

Coucou

On dirait un vilain problème de "haslayout", tu trouveras plus d'infos ici

Rajoute une hauteur à tes a et ça devrait aller

#menu_gauche ul li a { 

    height:100%; /* vilain vilain IE*/

    display                : block; 
    background-color    : #c93482; 
    color                : #FFF; 
    font-family            : "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size            : 12px; 
    padding-left        : 12px; 
    margin-top            : 10px; 
    margin-right        : 0; 
    margin-bottom        : 0px; 
    margin-left            : 0; 
    padding-top            : 2px; 
    background-image    : url(images/puce_carre_blanc.gif); 
    background-repeat    : no-repeat; 
    background-position    : left; 
    text-decoration        : none; 
} 

Edit redkissifrott a été plus rapide ^^ (le width marche aussi)
Modifié par saiko_sama (23 Jun 2010 - 16:57)

merci, les amis, je ne connaissais pas du tout cette histoire de haslayout, je suis bien content que la solution soit aussi simple, je me voyais déjà en train de faire une feuille entière rien que pour IE6...