...

View Full Version : CSS Dropdown menu not working when I have a javascript onnouseover on IE



poutine
05-18-2009, 10:00 AM
My code works perfectly on firefox in every page. When I try it on IE, the code works fine until I have to put some JS on something else. There the menu just doesnt come down. Heres my CSS code and a sample of an HTML with a onmouseover

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #040C38;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
width:100%;
}
#container {
margin-top:50;
width: 940px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;

}
#entete {
background: #BF0000;
padding: 5px 0 0px 0px;
}
#entete h1 {
margin: 0;
padding: 10px 0;
color: #040C38;
}
#barreCote {
width: 170px;
float: right;
background: #BF0000;
padding: 15px 0px 15px 0px;
}
#barreCote a{
color: #000000;
}
#contenu {
margin-left:0px;
padding: 20px 20px;
}
#piedPage {
padding: 0 10px 0 20px;
background:#7996C9;
}
#piedPage p {
margin: 0;
padding: 10px 0;
font-size: 12;
}
#menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
#menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
#menu li{
float:left;
padding:0px;
}
#menu li a{
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#menu li a:hover, #menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
#menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#menu li:hover ul {
display:block;
}
#menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
#menu li:hover li a{
background:none;

}
#menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;

}
#menu li ul a:hover, #menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
#menu p{
clear:left;
}

Heres my html source code

<script type="text/javascript">
var selected = false;
var selection;
function selecting(id)
{
if(selected)
{selection.style.background = '#FFFFFF'; }
id.style.background = '#7996C9';
selection=id;
selected = true;
}
function etendre(idNom, liste)
{
id = document.getElementById(idNom);
if(document.getElementById(idNom).style.visibility == 'hidden')
{
id.style.visibility = 'visible';
id.style.display = 'inline';
liste.style.listStyleImage = 'url(img/moins.png)';
}
else
{
id.style.visibility = 'hidden';
id.style.display = 'none';
liste.style.listStyleImage = 'url(img/plus.png)';
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML><HEAD><TITLE>Bienvenue</TITLE>
<LINK REL="stylesheet" HREF="label.css" TYPE="text/css"></HEAD><BODY>
<div id="container"><div id="entete"><img src="img/marianne.png" />
<img src="img/annpref1.jpg" /><br><br><div id="menu"><ul>
<li><a href="profilAccueil.php">Accueil</a></li>
<li><a href="#">Recherche</a>
<ul>
<li><a href="Recherche.php">Personnes</a></li>
<li><a href="StructuresListe.php">Structures</a></li>
</ul>
</li></lu></div></div>
<div id="barreCote">
<p><a href="index.php">Se Connecter</a></p></div><div id="contenu"><h1>Structures</h1><div><ul></div><div id="Plafond" style='cursor:pointer' onmouseover="selecting(this)"><li id='Préfecture de l'Ain' style='list-style-image:url(img/plus.png)' onclick="etendre('01', this)">
Préfecture de l'Ain</li></div><div id="01" style='visibility:hidden; display:none;' >
<ul><div id="0101" style='cursor:pointer' onmouseover="selecting(this)"><li>
Services</li></div>
<ul><div id="010101" style='cursor:pointer' onmouseover="selecting(this)"><li>
Ressources </li></div>
<div id="010102" style='cursor:pointer' onmouseover="selecting(this)"><li>
Action</li></div>
<div id="010103" style='cursor:pointer' onmouseover="selecting(this)"><li>
nel</li></div>
<div id="010104" style='cursor:pointer' onmouseover="selecting(this)"><li>
Pat</li></div>
</ul><div id="0102" style='cursor:pointer' onmouseover="selecting(this)"><li>
Seration</li></div>
</ul></div><div id="Plafond" style='cursor:pointer' onmouseover="selecting(this)"><li id='Sous-Préfecture de Belley' style='list-style-image:url(img/plus.png)' onclick="etendre('02', this)">
Sey</li></div><div id="02" style='visibility:hidden; display:none;' >
<ul><div id="0201" style='cursor:pointer' onmouseover="selecting(this)"><li>
Decs</li></div>
<div id="0202" style='cursor:pointer' onmouseover="selecting(this)"><li>
Acon</li></div>
</ul></div><div id="Plafond" style='cursor:pointer' onmouseover="selecting(this)"><li id='Sous-prefeture de Gex' style='list-style-image:url(img/plus.png)' onclick="etendre('03', this)">
Sox</li></div><div id="03" style='visibility:hidden; display:none;' >
<ul><div id="0301" style='cursor:pointer' onmouseover="selecting(this)"><li>
CI</li></div>
<ul><div id="030101" style='cursor:pointer' onmouseover="selecting(this)"><li>
ps</li></div>
</ul></ul></ul></div><br><font size=1>Clickez 2 fois sur votre séléction pour continuer</font></div><div id="piedPage"><p>Préfectr</p></div></div></BODY></HTML>

abduraooft
05-18-2009, 10:45 AM
I'd recommend you to check htmldog.com/articles/suckerfish/dropdowns/ to make a drop down menu, since I observe a lot of invalid items (http://validator.w3.org/#validate_by_input) in your above posted code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum