Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Dropdown menu not working when I have a javascript onnouseover on IE

    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
    Code:
    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
    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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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 in your above posted code.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •