Menu déroulant CSS qui pose problème sur IE7

Question

antony64

30 Dec 2007 à 12:03

Bonjour tout le monde,

je suis nouveau sur le forum et en programmation en général et je viens vous demander de l'aide car j'ai tout essayé sans réussir.

J'ai un site à faire (c'est un exercice mais peu importe), avec un cahier des charges qui me dit que je dois utiliser une mise en page tableau. Ce que j'ai fait, mais j'ai aussi implémenté du CSS. Je précise que le CSS est intégré à la page, pas dans une feuille séparée.

J'ai donc trouvé un menu déroulant css qui fonctionne bien sous IE6 firefox, Opéra et Safari mais qui refuse obstinément de se dérouler sous IE7! Un comble, ce dernier étant censé mieux réagir que son ancêtre.

Il fonctionne tout seul dans IE 7:

HTML

<div class="menu">

<!-- un menu de navigation -->
<ul>
<li><a href="lien.html">Menu 1</a></li>
</ul>

<!-- un menu de navigation avec sous-menus-->
<ul>
<li><a href="#">Menu 2<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="lien.html">Sous menu 2.1</a></li>
<li><a href="lien.html">Sous menu 2.2</a></li>
<li><a href="lien.html">Sous menu 2.3</a></li>
<li><a href="lien.html">Sous menu 2.4</a></li>
<li><a href="lien.html">Sous menu 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<!-- un menu de navigation avec sous-menus-->
<ul>
<li><a href="#">Menu 3<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="lien.html">Sous menu 3.1</a></li>
<li><a href="lien.html">Sous menu 3.2</a></li>
<li><a href="lien.html">Sous menu 3.3</a></li>
<li><a href="lien.html">Sous menu 3.4</a></li>
<li><a href="lien.html">Sous menu 3.5</a></li>
<li><a href="lien.html">Sous menu 3.6</a></li>
<li><a href="lien.html">Sous menu 3.7</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

CSS

 <style type="text/css">
<!--

body { background:#000000;  font-family: "Times New Roman", Times, serif; }



.paragraphe_principal { width: 462; height: 375; margin-left: 15px; margin-right: 18px; margin-top: 20px; margin-bottom: 20px; text-align: justify; overflow: auto; }
.lettrine:first-letter {float:left; font-family: "Times New Roman", Times, serif; font-weight:bold ; font-size: 3em; margin-top:0px;}
.paragraphe_normal { text-indent:20px; }
.additionnel { width: 181px; height: 259; margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; text-align: justify; font-size: 90%; overflow: auto; }
.contact { width: 182px; height: 220px; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; text-align: left; font-size: 90%; overflow: auto; }
a.roll img{ opacity: 1.0; filter:alpha(opacity=100); }
a.roll:hover img{ opacity: 0.8; filter:alpha(opacity=80); }





h3 {text-indent: 50px; font-variant: small-caps; letter-spacing: 0.5em; }
h4 { text-indent: 45px; font-variant: small-caps; letter-spacing: 0.2em; }
h4:first-letter {text-transform: uppercase; }

p, h3, h4 { color: rgb(237,237,237); }


tr, td, ul, li, div, h3, h4, a {padding: 0; margin: 0;}

.menu {white-space:nowrap /*IE hack*/; float:left; width:795px; border:none; background:rgb(225,225,225); color:rgb(0,0,0); font-size:130%;}
.menu ul {list-style-type:none;}
.menu ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.menu ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.4em; line-height:2.5em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
.menu ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.menu ul li:hover {position:relative;}
.menu ul li:hover a {background-color:rgb(210,210,210); text-decoration:none;}
.menu ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.3em; margin-top:0.1em; left:0;}
.menu ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}
.menu ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;}

/*IE6 hovering*/
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
.menu ul li a:hover {position:relative /*IE hack*/; z-index:1000 /*IE hack*/; background-color:rgb(210,210,210); text-decoration:none;}
.menu ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.1em; left:0; margin-top:0.1em;}
.menu ul li a:hover ul li a {white-space:normal; display:block; width:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}
.menu ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;}

@media print {.menu {float:left; width:900px; border:none; background:rgb(240,240,240); color:rgb(75,75,75); font-size:1.0em; font-size:130%;}}




-->
</style>

---------------------------------

Une fois implémenté dans mon code à moi:

<html>
<head>
<title>siteweb</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

body { background:#000000;  font-family: "Times New Roman", Times, serif; }



.paragraphe_principal { width: 462; height: 375; margin-left: 15px; margin-right: 18px; margin-top: 20px; margin-bottom: 20px; text-align: justify; overflow: auto; }
.lettrine:first-letter {float:left; font-family: "Times New Roman", Times, serif; font-weight:bold ; font-size: 3em; margin-top:0px;}
.paragraphe_normal { text-indent:20px; }
.additionnel { width: 181px; height: 259; margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; text-align: justify; font-size: 90%; overflow: auto; }
.contact { width: 182px; height: 220px; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; text-align: left; font-size: 90%; overflow: auto; }
a.roll img{ opacity: 1.0; filter:alpha(opacity=100); }
a.roll:hover img{ opacity: 0.8; filter:alpha(opacity=80); }





h3 {text-indent: 50px; font-variant: small-caps; letter-spacing: 0.5em; }
h4 { text-indent: 45px; font-variant: small-caps; letter-spacing: 0.2em; }
h4:first-letter {text-transform: uppercase; }

p, h3, h4 { color: rgb(237,237,237); }


tr, td, ul, li, div, h3, h4, a {padding: 0; margin: 0;}

.menu {white-space:nowrap /*IE hack*/; float:left; width:795px; border:none; background:rgb(225,225,225); color:rgb(0,0,0); font-size:130%;}
.menu ul {list-style-type:none;}
.menu ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.menu ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.4em; line-height:2.5em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
.menu ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.menu ul li:hover {position:relative;}
.menu ul li:hover a {background-color:rgb(210,210,210); text-decoration:none;}
.menu ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.3em; margin-top:0.1em; left:0;}
.menu ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}
.menu ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;}

/*IE6 hovering*/
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
.menu ul li a:hover {position:relative /*IE hack*/; z-index:1000 /*IE hack*/; background-color:rgb(210,210,210); text-decoration:none;}
.menu ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.1em; left:0; margin-top:0.1em;}
.menu ul li a:hover ul li a {white-space:normal; display:block; width:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}
.menu ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;}

@media print {.menu {float:left; width:900px; border:none; background:rgb(240,240,240); color:rgb(75,75,75); font-size:1.0em; font-size:130%;}}




-->
</style>









</head>
<body>

<table id="Tableau_01" width="901" height="1001" border="0" cellpadding="0" cellspacing="0" align="center";>
	<tr>
		<td colspan="10">
			<img src="images/01.jpg" width="900" height="52" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="52" alt=""></td>
	</tr>
	<tr>
		<td rowspan="15">
			<img src="images/02.jpg" width="50" height="948" alt=""></td>
		<td colspan="2">
			<a href="sitewebiebase6.html" class="roll"> <img src="images/03.jpg" width="101" height="53" border="0" /></a></td>
		<td colspan="2">
			<a href="sitewebiebase6.html" class="roll"> <img src="images/04.jpg" width="137" height="53" border="0" /></a></td>
		<td colspan="3">
			<img src="images/05.jpg" width="561" height="53" alt=""></td>
		<td colspan="2">
			<img src="images/06.jpg" width="51" height="53" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="53" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/07.jpg" width="800" height="183" alt=""></td>
		<td rowspan="14">
			<img src="images/08.jpg" width="50" height="895" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="183" alt=""></td>
	</tr>
	<tr>
	
    
    
    
    
    
    
    
<!--/* Début du menu*/-->    




    	<td colspan="8" background="images/09.jpg"><div class="menu">

<!-- menu de navigation -->
<ul>
<li><a href="#">Menu 1<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="lien.html">Sous menu 1.1</a></li>
<li><a href="lien.html">Sous menu 1.2</a></li>
<li><a href="lien.html">Sous menu 1.3</a></li>
<li><a href="lien.html">Sous menu 1.4</a></li>
<li><a href="lien.html">Sous menu 1.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>



<!-- menu de navigation avec sous-menus-->
<ul>
<li><a href="#">Menu 2<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="lien.html">Sous menu 2.1</a></li>
<li><a href="lien.html">Sous menu 2.2</a></li>
<li><a href="lien.html">Sous menu 2.3</a></li>
<li><a href="lien.html">Sous menu 2.4</a></li>
<li><a href="lien.html">Sous menu 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<!-- menu de navigation avec sous-menus-->
<ul>
<li><a href="#">Menu 3<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="lien.html">Sous menu 3.1</a></li>
<li><a href="lien.html">Sous menu 3.2</a></li>
<li><a href="lien.html">Sous menu 3.3</a></li>
<li><a href="lien.html">Sous menu 3.4</a></li>
<li><a href="lien.html">Sous menu 3.5</a></li>
<li><a href="lien.html">Sous menu 3.6</a></li>
<li><a href="lien.html">Sous menu 3.7</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div></td>








<!--/* Fin du menu*/-->





<td>
			<img src="images/spacer.gif" width="1" height="53" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/10.jpg" width="800" height="14" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td rowspan="11">
			<img src="images/11.jpg" width="46" height="645" alt=""></td>
		<td colspan="2" rowspan="2" background="images/12.jpg"><h4>additionnel</h4> </td>
	  <td colspan="2" rowspan="4">
	  <img src="images/13.jpg" width="25" height="318" alt=""></td>
            
		<td background= "images/14.jpg"><h3>titre principal</h3>
        
	  </td>
            
		<td colspan="2" rowspan="11">
			<img src="images/15.jpg" width="43" height="645" alt=""></td>
            
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td rowspan="5" background="images/16.jpg" ><div class="paragraphe_principal"><p class="lettrine">Là dedans, on met le texte principal ainsi que les photos si besoin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur dignissim pede ac justo. Cras scelerisque libero sed felis. Nullam nunc eros, vulputate nec, pretium vitae, tincidunt eu, odio. Sed et augue. Etiam tincidunt magna sit amet massa. Praesent a dolor. Ut sem turpis, dictum a, porta ut, lacinia nec, libero. Duis commodo purus sed ligula. Duis sed dui in urna rhoncus posuere. Curabitur et ante vitae odio dictum elementum. Nulla nonummy. Aliquam porta. Curabitur velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla aliquam.</p>
	    <p class="paragraphe_normal">Morbi posuere fringilla elit. Maecenas ac felis. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nulla lacus, hendrerit et, varius eget, consectetuer sed, lacus. Donec ultricies arcu vitae pede. Ut leo. In sed risus et ligula tempus posuere. Morbi tellus. Quisque at sem nec lacus dignissim malesuada. Vivamus sem lacus, congue id, aliquet ac, hendrerit nec, nulla. Praesent molestie. Pellentesque posuere, metus nec ultrices tincidunt, nulla ante molestie nunc, non interdum enim erat vitae eros. Suspendisse potenti. Pellentesque posuere aliquet nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel lectus id turpis cursus egestas. In laoreet cursus dui. In eget lacus. Nam nunc. Duis sed nisi. Nulla fermentum orci vel nisl. Cras tempor. Proin interdum elementum massa. Donec nisi pede, vulputate nec, euismod et, euismod in, neque. Donec bibendum, eros at scelerisque fringilla, ligula risus interdum libero, ac vehicula ligula massa vitae diam. Proin nec diam. Donec facilisis dictum nisl. Mauris sapien turpis, gravida at, bibendum vitae, dignissim sed, nunc. Donec viverra, arcu in dapibus ullamcorper, lectus lorem ornare libero, eget suscipit purus magna id justo. Donec a elit. Etiam euismod ultrices pede.

</p></div></td>
<td>
			<img src="images/spacer.gif" width="1" height="4" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" background="images/17.jpg"><div class="additionnel"><p> Ici on met tout les contenus additionnels, par ex des infos suppl, des liens rattachés au sujet. Voire des petites images. </p></div></td>
<td>
			<img src="images/spacer.gif" width="1" height="269" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/18.jpg" width="191" height="22" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" background="images/19.jpg"><h4> Contact </h4></td>
<td rowspan="7">
			<img src="images/20.jpg" width="24" height="327" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="4" background="images/21.jpg"><div class="contact"><p>Des mails, des adresses réelles etc.</p></div></td>
<td>
			<img src="images/spacer.gif" width="1" height="103" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/22.jpg" width="495" height="12" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="12" alt=""></td>
	</tr>
	<tr>
		<td background="images/23.jpg"><h4>liens et mentions legales</h4></td>
<td>
			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/24.jpg" width="495" height="95" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="89" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="images/25.jpg" width="192" height="70" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/26.jpg" width="495" height="64" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="64" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="50" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="46" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="55" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="136" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="24" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="495" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="42" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="50" height="1" alt=""></td>
		<td></td>
	</tr>
</table>

</body>
</html>

Si quelqu'un peut me dire pourquoi le :hover ne marche pas sous IE7 alors que partout ailleurs il n'y a pas de problèmes? Merci d'avance!
Modifié par antony64 (30 Dec 2007 - 12:33)

Igor

30 Dec 2007 à 12:19

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

antony64

30 Dec 2007 à 12:35

Et voilà, message édité. Milles excuses Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

Menu déroulant CSS qui pose problème sur IE7