IE n'affiche pas mes lien

Hello, j'ai un menu, il fonctionne super bien sous tout les navigateur sauf IE (6 ou 7).

Voilà le code:

<div id="menu">
<ul>
<li class="elementMenu"><a href="index.php" class="lienMenu">Accueil</a></li>
<li class="elementMenu"><a href="#" class="lienMenu">Qui sommes-nous ?</a></li>
<li class="elementMenu"><a href="#" class="lienMenu">Nos services</a></li>
<li class="elementMenu"><a href="#" class="lienMenu">Histoire de la g&eacute;n&eacute;alogie</a></li>
<li class="elementMenu"><a href="#" class="lienMenu">T&eacute;moignage</a></li>
<li class="elementMenu"><a href="#" class="lienMenu">Sites &agrave; voir</a></li>
<li class="elementMenu"><a href="#" class="lienMenu">Contact</a></li>
</ul>
</div>

et le CSS au cas ou:

div#menu {
	width:220px;
	height:300px;

	float:left;
	margin-top:100px;
	margin-left:38px;
	padding-top:120px;
	/*background-repeat:no-repeat;*/

	background-image:url("img/menu.png");
	z-index:20;
}

li.elementMenu {
	width:185px;
	margin-left:-30px;
	padding-left:15px;/*a acorder avec width*/
	padding-top:5px;
	padding-bottom:5px;
	font-size:small;
	list-style-type:none;
	
	background-image:url("img/rondflecheclair.png");
	background-repeat:no-repeat;
	background-position:right;
}

li.elementMenu:hover {
	background-color:#8f5c3e;
	
	background-image:url("img/rondflechefonce.png");
	background-repeat:no-repeat;
	background-position:right;
}

a.lienMenu {
	color:black;
	text-decoration:none;
	display:block;
}

Modifié par zippy (16 Nov 2007 - 18:24)

Bonjour,

Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.

Bonjour zippy,

En regardant ton code, je trouve que tu sur-utilise les class. Sache que tu peux utiliser l'effet cascade des CSS. Elles sont conçu précisément pour ca. Par exemple, si tu veux styler :

Tous les li de ton div menu

div#menu ul li {
...les styles ici
}

Tous les a de ton div menu, qui sont dans les li

div#menu ul li a {
...les styles ici
}

Cela t'évite de mettre une class à chaque élément. C'est beaucoup moins lourd et plus facile à maintenir de cette façon.

Bonne continuation !

Commence par alléger tes class. et les css de tes divs. Il est parfois inutile de répéter certaiens choses. Par exemple si toutes polices sont en verdana, autant le mettre ton font-family dans le css de la div qui englogbe tout (la père). C'est pareil pour le reste. Tu gagneras en lisibilité et tu pourras cibler mieux ton problème.

en principe le css n'influence pas le fait qu'un lien soit cliquable ou non? parce qu'il viens de la mon problème, pour IE il n'y a aucun lien...

"Principe" et IE ne font pas bons ménages...

Ouais.. je viens de remarquer.. j'ai trouvée d'où venais le problème: mon float:left... si je l'enlève je peut cliquer sur les lien mais sa casse mon design, je vais allégé mon css et on verra bien ce qu'on peut y faire...

Edit: voilà ce que sa donne alégée:

<div id="menu">
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="#">Qui sommes-nous ?</a></li>
<li><a href="#">Nos services</a></li>
<li><a href="#">Histoire de la g&eacute;n&eacute;alogie</a></li>
<li><a href="temoignage.php">T&eacute;moignage</a></li>
<li><a href="#">Sites &agrave; voir</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

et le CSS:

div#menu {
	width:220px;
	height:300px;

	float:left;
	margin-top:100px;
	margin-left:38px;
	padding-top:120px;
	/*background-repeat:no-repeat;*/

	background-image:url("img/menu.png");
	z-index:20;
}

div#menu ul li {
	width:185px;
	margin-left:-30px;
	padding-left:15px;/*a acorder avec width*/
	padding-top:5px;
	padding-bottom:5px;
	font-size:small;
	list-style-type:none;
	
	background-image:url("img/rondflecheclair.png");
	background-repeat:no-repeat;
	background-position:right;
}

div#menu ul li:hover {
	background-color:#8f5c3e;
	
	background-image:url("img/rondflechefonce.png");
	background-repeat:no-repeat;
	background-position:right;
}

div#menu ul li a {
	color:black;
	text-decoration:none;
	display:block;
}

a priori il n'y a que le float:left de la première partit qui pose problème a IE 6 ou 7, mais j'ai aucune idée de comment le remplacer pour que mes lien fonctionne...
Modifié par zippy (17 Nov 2007 - 16:41)