Marre d'Internet Explorer !

zanmann · 31 Janvier 2011

Bonjour,

Comme Lorinthal j'ai moi aussi un problème avec le menu déroulant sous IE8.

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

Modifié 1 Février 2011 par Dudu
Majuscules

Dudu · 1 Février 2011

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.

Connexion

Marre d'Internet Explorer !

Sujets conseillés

zanmann

Dudu

Veuillez vous connecter pour commenter

Parcourir

Activité