[Résolu] CSS foireux Internet Explorer

mahefarivony · 26 Octobre 2006

Yo,

Mon menu "déroule" bien sous Firefox ... et hop, a plus de déroulement sous IE 8O

:arrow: http://www.madanight.com

Ca fait 3 jours que j'essaye de comprendre je trouve pas. Merci d'avance.

dadovb · 26 Octobre 2006

Je suis pas un expert, mais as-tu testé en mettant ton déclencheur de déroulement en onMouseOver sur chaque titre principal du menu ?

e-kiwi · 26 Octobre 2006

mahe, tu veux pas le meme munu, mais 100% css ?

narayana · 26 Octobre 2006

hum à première vue il a quelques souci.

Code:

function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}

Tu t'en sers où ?
car je ne l'ai pas vu dans le source...

Je regarde plus en détail

mahefarivony · 26 Octobre 2006

e-kiwi a dit:
mahe, tu veux pas le meme munu, mais 100% css ?

pas de problème : je veux juste avoir un menu qui soit indexable et qui soit en position "relatif".

narayana > ça c'est le reste d'un ancien menu V1.0

narayana · 26 Octobre 2006

Hum teste cela

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels http://css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 60% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 100px;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
height:20px;
line-height:20px;
}
#menu dd {
position:absolute;
width:120px;
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #ccc;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#menu hr{
background: #ccc;
}
-->
</style>
</head>

<body>
<div id="menu">
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');"><a href="http://www.madanight.com/News-new_topic-7.htm">Articles</a></dt>
			<dd id="smenu1">
				<ul>
					 <li class="first"><a href="http://www.madanight.com/News-new_topic-7.htm"><span>Reportages</span></a></li>
			      <li><a href="http://www.madanight.com/madagascar-categories-7.htm"><span>Interview</span></a></li>
			      <li><a href="http://www.madanight.com/News-new_topic-13.htm"><span>Sport</span></a></li>
			      <li><a href="http://www.madanight.com/News-new_topic-5.htm"><span>Mode</span></a></li>
			      <hr/>
			      <li class="last"><a href="http://www.madanight.com/mmc"><span>Diffuser un communiqué</span></a></li>
				</ul>
			</dd>
	</dl>
	<dl>
		<dt onmouseover="javascript:montre();"><li><a href="http://www.madanight.com/culture">Shopping</a></li></dt>
	</dl>
	<dl>
		<dt onmouseover="javascript:montre();"><li><a href="http://www.madanight.com/rubrique-madagascar-eGallery.htm">Photos</a></li></dt>
	</dl>
	<dl>
		<dt onmouseover="javascript:montre();"><li><a href="http://www.madanight.com/rubrique-madagascar-Forums.htm">Forums</a></li></dt>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');"><a href="#">Services</a></dt>
			<dd id="smenu2">
				<ul>
					<li class="first"><a href="http://blogs.madanight.com/"><span>Créer votre blog</span></a></li>
			   	<li><a href="http://www.madanight.com/rubrique-madagascar-agence-voyage-malgache.htm"><span>Billet d'avion</span></a></li>   
			    <li><a href="http://sms.madanight.com/envoyer.php"><span>Envoyer SMS</span></a></li>
			    <hr/>
			   	<li><a href="http://voiture-occasion.madanight.com/"><span>Voiture d'occasion</span></a></li>
		      <li><a href="http://moto.madanight.com/"><span>Moto d'occasion</span></a></li>
		      <li><a href="http://immobilier.madanight.com/"><span>Location immo</span></a></li>
			  	<li><hr/></li>
		      <li><a href="http://www.sipagasy.com/"><span>Rencontre</span></a></li>
		      <li><a href="http://www.mobiloo.net/"><span>Portail voiture</span></a></li>
			    <li><a href="http://www.madanight.com/annonceur"><span>Publicité sur madanight</span></a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');"><a href="#">Pratique</a></dt>
			<dd id="smenu3">
				<ul>
					<li class="first"><a href="http://www.madanight.com/Evenement-file-agenda-cal_date-all.htm"><span>Agenda</span></a></li>
			    <li><hr /></li>
		      <li><a href="http://www.madanight.com/viewarticle_101.htm"><span>Air Madagascar</span></a></li>
			  	<li><a href="http://www.madanight.com/viewarticle_388.htm"><span>Television</span></a></li>
		      <li><a href="http://www.madanight.com/viewarticle_443.htm"><span>Presse</span></a></li>
		      <li><a href="http://www.madanight.com/viewarticle_104.htm"><span>Radio</span></a></li>
		      <li><hr /></li>
					<li><a href="http://recettes-cuisine.madanight.com/"><span>Cuisine</span></a></li>
		      <li><a href="http://annuaire.madanight.com/"><span>Annuaire</span></a></li>
		      <li><a href="http://www.madanight.com/Content-pa-showpage-pid-19.htm"><span>Météo</span></a></li>
		      <li><a href="http://www.madanight.com/rubrique-madagascar-Dictionnaire-Anglais-Francais-Malgache.htm"><span>Dictionnaire</span></a></li>
		      <li><a href="http://www.madanight.com/viewarticle_118.htm"><span>Change ariary</span></a></li>
				</ul>
			</dd>
	</dl>
	<dl>
		<dt onmouseover="javascript:montre();"> <li><a href="http://www.madanight.com/rubrique-madagascar-Web_Links.htm">Annuaire</a></li> </dt>
	</dl>
	
	    
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');"> <a href="#">Portail</a></dt>
			<dd id="smenu4">
				<ul>
					<li class="first"><a href="http://www.madanight.com/rubrique-madagascar-Your_Account.htm"><span>Accès compte</span></a></li>
		      <li><hr /></li>
		      <li><a href="http://www.madanight.com/rubrique-madagascar-newsletter.htm"><span>Newsletter</span></a></li>
		      <li><a href="http://www.madanight.com/rubrique-madagascar-Feedback.htm"><span>Contactez nous</span></a></li>
		      <li><a href="http://www.madanight.com/rubrique-madagascar-Stories_Archive.htm"><span>Archives</span></a></li>
		      <li><hr /></li>
		      <li class="last"><a href="http://www.madanight.com/viewarticle_120.htm"><span>Plan du site</span></a>&nbsp;</li>
	   			</ul>
			</dd>
	</dl>
	<dl>
		<dt onmouseover="javascript:montre();"  style="width:250px;"> 
			<li style="height:20px;"><form action="http://www.madanight.com/modules.php?op=modload&amp;name=Recherche&amp;file=index" method="post"><input type=text size=18 value="rechercher sur mn" name=actualite><input type=submit value=Go></form></li>
		</dt>
	</dl>
</div>
</body>
</html>

Je ne sais pas si cela peut te satisfaire :roll:

mahefarivony · 26 Octobre 2006

merci mais il y a quelques problemes :-(
- les dimensions des colonnes sont fixes, c'est pas évident à changer
- les sous-menus apparaissent tous au chargement de la page

e-kiwi · 26 Octobre 2006

je t'ai envoyé le menu de tes reves en mp

dadovb · 26 Octobre 2006

e-kiwi a dit:
je t'ai envoyé le menu de tes reves en mp

Ce serait possible de m'envoyer la fille de mes rêves (sur ton avatar) en MP ?

mahefarivony · 26 Octobre 2006

dès que je commence à mettre mes grosses paluches sur la fille de mes rêves ... euh pardon, dans le code .... catastrophe :mrgreen:

mahefarivony · 1 Novembre 2006

Yo,

Problème résolu : en fait j'avais oublié de brancher l'évenement onLoad dans le body !

Code:

<body onLoad="setHover()">

... un big merci à ceux qui se sont plié en 4 pour me donner un coup de main ;-)