Pbm compatibilité css IE7

Gautrish Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -  
Carotte77 Messages postés 543 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
J'ai voulu créer un menu déroulant pour mon site inernet. http://stmarcfoot.free.fr/
Le problème est qu'avec le navigateur IE7 les menus restent fixes.

Voici mon code css:
table {border-collapse:collapse; border:0; margin:0; padding:0;}
body {font-size:62.5%; font-family:verdana,arial,sans-serif; background-color:rgb(255,255,255)}

.menu {
white-space:nowrap /*IE hack*/;
float:left; width:720px;
text-align:center; color: rgb(255,255,255);
border:none; font-size:14px;
}
.menu ul {
list-style-type:none;
}
.menu ul li {
float:left;
z-index:auto !important /*Non-IE6*/;
z-index:1000 /*IE6*/;
}
.menu ul li a {
float: none !important /*Non-IE6*/;
float:left /*IE-6*/; display:block;
padding-left:26px;
padding-right: 26px;
height:1.9em;
line-height:1.75em;
text-decoration:none;
font-weight:bold;
color: rgb(255,255,255);
}
.menu ul li ul {
display:none;
border:none;
}

/*------------------------------------Non-IE6 hovering------------------------------------*/
.menu ul li:hover {
position:relative;
}
.menu ul li:hover a {
background-image: url('images/menu/sousmenu.png');
text-decoration:none;
}
.menu ul li:hover ul {
display:block;
width:10.0em;
position:absolute;
z-index:999;
top:1.85em;
margin-top:0.1em;
left:0;
}
.menu ul li:hover ul li a {
white-space:normal;
display:block;
width:11em;
height:auto;
line-height:18px;
margin-left:-1px;
padding:4px 20px 4px 20px;
border-left:solid 1px rgb(255,255,255);
border-top:solid 1px rgb(255,255,255);
border-bottom: solid 1px rgb(255,255,255);
background-image: url('images/menu/sousmenu.png');
font-weight:normal;
color:rgb(255,255,255);
}
.menu ul li:hover ul li a:hover {
background-image: url('images/menu/sousmenu_inv.png');
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-image: url('images/menu/sousmenu.png');
text-decoration:none;
}
.menu ul li a:hover ul {
display:block;
width:10.0em;
position:absolute;
z-index:999;
top:1.5em;
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;
margin-left:-1px;
padding:4px 20px 4px 20px;
border-left:solid 1px rgb(255,255,255);
border-top:solid 1px rgb(255,255,255);
border-bottom: solid 1px rgb(255,255,255);
background-image: url('images/menu/sousmenu.png');
font-weight:normal;
color:rgb(255,255,255);
}
.menu ul li a:hover ul li a:hover {
background-image: url('images/menu/sousmenu_inv.png');
text-decoration:none;
}

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


Pour le HTML:

<div class="menu">

<!-- un menu de navigation -->
<!-- un menu de navigation avec sous-menus-->
<ul>
<li><a href="#">Equipes<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="pages/equipes/seniors.htm">Seniors</a></li>
<li><a href="pages/equipes/feminines.htm">Féminines</a></li>
<li><a href="pages/equipes/18.htm">18ans</a></li>
<li><a href="pages/equipes/15.htm">15ans</a></li>
<li><a href="pages/equipes/13.htm">13ans</a></li>
<li><a href="pages/equipes/Benjamins.htm">Benjamins</a></li>
<li><a href="pages/equipes/Poussins.htm">Poussins</a></li>
<li><a href="pages/equipes/Debutants.htm">Débutants</a></li>
<li><a href="pages/equipes/Loisirs.htm">Loisirs</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="#">Convocations<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="pages/Convocations/Seniors.pdf">Seniors</a></li>
<li><a href="pages/Convocations/15ans.pdf">15ans</a></li>
<li><a href="pages/Convocations/13ans.pdf">13ans</a></li>
<li><a href="pages/Convocations/Benjamins.pdf">Benjamins</a></li>
<li><a href="pages/Convocations/Poussins.pdf">Poussins</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<ul>
<li><a href="pages/contacts.htm">Contacts</a></li>
</ul>

<ul>
<li><a href="pages/historique.htm">Historique</a></li>
</ul>

<ul>
<li><a href="#">Autres<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="pages/charte.htm">Charte</a></li>
<li><a href="pages/Entrainements.html">Entraînements</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="#">Liens<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="https://www.fff.fr/">FFF</a></li>
<li><a href="https://foot44.fff.fr/">District</a></li>
<li><a href="http://www.mairie-saintnazaire.fr/">Ville de St-Nazaire</a></li>
<li><a href="https://stmarcfoot-feminines.skyrock.com/">Blog des Féminines</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
A voir également:

1 réponse

Carotte77 Messages postés 543 Date d'inscription   Statut Membre Dernière intervention   541
 
Bonjour,

Je comprend ton problème. Ces sites devraient t'aider (si ce n'est pas le cas, reviens ici !)

https://forum.alsacreations.com/topic-1-20215-1-Probleme-menu-CSS-avec-IE7.html
https://www.clubic.com/forum/t/feuille-css-erreur-presentation-sous-ie-7/382259

C'est tout ce que j'ai trouvé... pour le moment !
1