Comme Lorinthal j'ai moi aussi un problème avec le menu déroulant sous IE8.
Mon site : Mon lien
Je ne m'y connais pas du tout en Javascript c'est un freelance qui m'a passé le code...
Je suis à deux jours de ma livraison de site et pour tout vous dire , je travaille sur Mac et j'ai bêtement zapé Internet Explorer dans mes tests (je sais c'est nul..)
Si quelqu'un pouvait m'aider je lui en serait très très reconnaissant....
Voici mon code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="forces.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--;><!]]></script>
<body bgcolor="#FFFFFF" leftmargin= "0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (forces_charte.psd) -->
<table id="Tableau_01" align="center" width="1024" height="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="bandeau" colspan="2" valign="top">
<img src="images_force/bandeau.jpg" width="1024" height="129" alt=""></td>
<td height="129" nowrap></td>
</tr>
<tr>
<td id="menu_hori" width="1024" height="43" colspan="2" valign="top">
<ul id="menu">
<li><img src="" alt="menu 1">
<ul class="sousmenu">
<li> menu 1.1
<ul class="sousmenu">
<li> menu 1.1.1</li>
<li> menu 1.1.2</li>
<li> menu 1.1.3</li>
</ul>
</li>
<li> menu 1.2</li>
<li> menu 1.3</li>
<li> menu 1.4</li>
</ul>
</li>
<li> <img src="" alt="menu 2"></li>
<li> <img src="" alt="menu 3"></li>
<li> <img src="" alt="menu 4"></li>
</ul>
</td>
<td height="50" nowrap></td>
</tr>
<tr>
<td valign="top">
<img src="images_force/fix_horizontal.gif" width="729" height="10" alt=""></td>
<td rowspan="2" valign="top">
<a href="http://federation-forces.com/index.php?id=16"><img src="images_force/forum.gif" alt="" width="295" height="110" border="0"></a></td>
<td height="10" nowrap></td>
</tr>
<tr>
<td id="diaporama" width="729" height="222" rowspan="2" valign="top">diaporama</td>
<td height="100" nowrap></td>
</tr>
<tr>
<td>
<a href="http://federation-forces.com/index.php?id=32">
<img src="images_force/newsletter.gif" width="295" height="122" border="0" alt=""></a></td>
<td height="122" nowrap></td>
</tr>
<tr>
<td colspan="2">
<table id="Tableau_zonebas" width="1024" height="589" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="contenu" width="729" height="465" valign="top">contenu editorial</td>
<td id="promo" width="295" valign="top">zone de promotion </td>
</tr>
<tr>
<td colspan="2">
<img src="images_force/footer.gif" width="1024" height="124" alt=""></td>
</tr>
</table></td>
<td height="589" nowrap></td>
</tr>
</table>
</body>
</html>
Le code CSS :
#menu_hori {
background-color: #FFFFFF;
z-index:9;
height:auto;
}
#menu li {
color: #ffffff;
text-decoration: none;
text-transform:uppercase;
text-align:center;
background-color:#094A5C;
font-size: 10px;
line-height: 20px;
}
#menu li a{
color: #ffffff;
text-decoration: none;
text-transform:uppercase;
text-align:center;
background-color:#094A5C;
font-size: 10px;
line-height: 20px;
}
#menu li a:visited {
color: #ffffff;
text-decoration: none;
text-align:center;
text-transform:uppercase;
background-color: #094A5C;
}
#menu li a:active {
color: #F4A00C;
text-decoration: none;
text-align:center;
text-transform:uppercase;
background-color: #094A5C;}
#menu li a:hover {
color: #08647e;
text-decoration: none;
text-align:center;
text-transform:uppercase;
background-color: #D2EBEF;}
#menu, #menu ul { /* toutes les listes */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
text-transform:capitalize;
}
#menu a {
display: block;
width: 170px;
text-transform:capitalize;
}
#menu li { /* tous les items de liste */
float: left;
width: 170px; /* largeur obligatoire, sinon opera devient fou */
}
#menu li ul { /* listes de deuxième niveau */
position: absolute;/* important */
background-color: #094A5C;
display:block;
float:right;
left:-999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
z-index:100;
width: 20px;
height:40px;
}
#menu li ul ul { /* listes de troisième niveau et plus */
margin:-1em 0 0 10em;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left:-999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* listes imbriquées sous lesitems de listes survolés */
left: auto;
}
/* IE PC selector */
* html .menu li {
display:inline; /* solve a IE PC list bug */
float:none; /* solve a IE5 clav nav bug */
}
a.linkOver{
background-color: #eee;
}
J'ajoute que juste au dessous de mon menu, j'ai un flash...(tant qu'à faire...)
Un grand merci à tous ceux qui voudront bien m'aider...
Ce message a été modifié par Dudu - 01 février 2011 - 02:59.
Raison de l'édition : Majuscules
Haut
