Jump to content
Sign in to follow this  
zanmann

Marre d'Internet Explorer !

Rate this topic

Recommended Posts

Bonjour,

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...

Edited by Dudu
Majuscules

Share this post


Link to post
Share on other sites

Bonjour, bienvenue sur le Hub.

Tu viens de t'inscrire, donc ta lecture des règles du forum est encore toute fraîche. En revanche, tu as du oublier d'y lire ce passage :

Enrichissements typographiques: Ils sont mis à disposition pour mettre en valeur une partie de votre message. La police standard convient très bien pour la majorité du contenu, inutile de tout mettre en rouge vif taille 36 points, vous n'aurez pas de réponse plus rapide pour autant. Et aussi, pitié pour nous, NE CRIEZ PAS en mettant tout votre message en majuscules.

C'est une des règles de base de la netiquette.

Ceci étant dit, ton code Javascript est un peu vieillot, et surtout Javascript est déconseillé pour ce genre d'effets de survol.

Je te conseille plutôt d'adapter un code de menu en CSS à ton design, tu trouveras une liste de menus dont le code est fourni ici: http://css.maxdesign....au/listamatic/

De plus, ça provoquera moins de problèmes avec Explorer.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...