www.webdeveloper.com
Results 1 to 4 of 4

Thread: Drop down menu is out of alignment in Internet Explorer. Works in Firefox.

  1. #1
    Join Date
    May 2009
    Posts
    2

    Drop down menu is out of alignment in Internet Explorer. Works in Firefox.

    Have a slight problem with a site that i am building. Our drop down menu is lined up in firefox and in dreamweaver. But is out of alignment in internet explorer 7. Pictures attached. We also have an error in the ddmenuitem line 25 in the html. Code for both below. Would appreciate any help! Thank you.

    CSS code:

    Code:
    #sddm
    {	margin: 0px 0px;
    	padding: 0px 0px;
    	z-index: 30}
    
    #sddm li
    {	
    	list-style: none;
    	float: left;
    	width:136px;
    	padding: 0px 0px;
    	margin: 0px 0px;
    	font: bold 13px arial}
    
    #sddm li a
    {	display: block;
    	padding: 6px 0px;
    	margin: 0px 7px;
    	background: transparent;
    	color: #FFF;
    	text-align: center;
    	text-decoration: none}
    
    #sddm li a:hover
    {	background: url(../images/redoverlay.jpg)}
    
    #sddm div
    {	position: fixed;
    	visibility: hidden;
    	padding: 0px 0px;
    	margin: 0px 0px;
    	background: #EAEBD8;
    	border: 1px solid  #000}
    
    	#sddm div a
    	{	position: static; 
    		display: block;
    		width: 150px;
    		padding: 0px 0px;
    		margin: 0px 0px;
    		white-space: nowrap;
    		text-align: left;
    		text-decoration: none;
    		background:  #FFF;
    		color: #000;
    		font: 12px Verdana, Geneva, sans-serif}
    
    	#sddm div a:hover
    	{	background: #666;
    		margin: 0px 0px;
    		padding: 0px 0px;
    		color: #FFF}
    HTML:

    Code:
    <head>
    	<meta name="keywords" content="">
    	<meta name="description" content="">
    	<link rel="stylesheet" type="text/css" href="css/default.css">
    <!-- dd menu -->
    <script type="text/javascript"> 
    <!--
    var timeout         = 500;
    var closetimer		= 0;
    var ddmenuitem      = 0;
     
    // open hidden layer
    function mopen(id)
    {	
    	// cancel close timer
    	mcancelclosetime();
     
    	// close old layer
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
     
    	// get new layer and show it
    	ddmenuitem = document.getElementById(id);
    	ddmenuitem.style.visibility = 'visible';
     
    }
    // close showed layer
    function mclose()
    {
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }
     
    // go close timer
    function mclosetime()
    {
    	closetimer = window.setTimeout(mclose, timeout);
    }
     
    // cancel close timer
    function mcancelclosetime()
    {
    	if(closetimer)
    	{
    		window.clearTimeout(closetimer);
    		closetimer = null;
    	}
    }
     
    // close layer when click-out
    document.onclick = mclose; 
    // -->
    </script>
    Attached Images Attached Images

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Probably need to set the list margins. Can't help further without the html.

  3. #3
    Join Date
    May 2009
    Posts
    2
    Here is the full html code. Thank you.

    Code:
    <!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">
    <head>
    	<meta name="keywords" content="">
    	<meta name="description" content="">
    	<link rel="stylesheet" type="text/css" href="css/default.css">
    <!-- dd menu -->
    <script type="text/javascript"> 
    <!--
    var timeout         = 500;
    var closetimer		= 0;
    var ddmenuitem      = 0;
     
    // open hidden layer
    function mopen(id)
    {	
    	// cancel close timer
    	mcancelclosetime();
     
    	// close old layer
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
     
    	// get new layer and show it
    	ddmenuitem = document.getElementById(id);
    	ddmenuitem.style.visibility = 'visible';
     
    }
    // close showed layer
    function mclose()
    {
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }
     
    // go close timer
    function mclosetime()
    {
    	closetimer = window.setTimeout(mclose, timeout);
    }
     
    // cancel close timer
    function mcancelclosetime()
    {
    	if(closetimer)
    	{
    		window.clearTimeout(closetimer);
    		closetimer = null;
    	}
    }
     
    // close layer when click-out
    document.onclick = mclose; 
    // -->
    </script>
     
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Super Deluxe Test Page</title>
    <style type="text/css">
    <!--
    body {
    	background-color: #D7D7D5;
    	background-image: url();
    	background-repeat: repeat-x;
    	font-family: "Times New Roman", Times, serif;
    	font-size: 12px;
    }
    .style1 {
    	font-size: 12px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    body,td,th {
    	font-size: 16px;
    	font-family: "Comic Sans MS", cursive;
    }
    -->
    </style></head>
    <center>
        <p><img src="images/april09-4_03.jpg" width="954px" height="89" alt="Wittmeier Ford Honda Chevrolet Chico CA"></p>
        <table border="0" align="center" cellpadding="0" cellspacing="0" width="954px" background="images/navbar.jpg">
        <tr>
        <td>
        <ul id="sddm" class="menu">
    	<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">New Vehicles</a>
    		<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    		<a href="#">Ford Vehicles</a>
    		<a href="#">Chevrolet Vehicles</a>
    		<a href="#">Lincoln Vehicles</a>
    		<a href="#">Mercury Vehicles</a>
    		<a href="#">Search All</a>
    		</div>
    	</li>
    	<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Used Vehicles</a>
    		</div>
    	</li>
    	<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Fleet Department</a>
    		</div>
    	</li>
    	<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Parts/Service</a>
    		<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    		<a href="#">Ford Parts</a>
    		<a href="#">Ford Service</a>
            <a href="#">Chevrolet Parts</a>
            <a href="#">Chevrolet Service</a>
            <a href="#">Honda Parts</a>
            <a href="#">Honda Service</a>
    		</div>
    	</li>
    	<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Body Shop</a>
    	</li>
        	<li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">About Us</a>
    		<div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    		<a href="#">About Wittmeier</a>
    		<a href="#">Employment Application</a>
    		<a href="#">Meh</a>
    		</div>
    	</li>
        	<li><a href="#" onmouseover="mopen('m7')" onmouseout="mclosetime()">Contact Us</a>
    		</div>
    	</li>
    </ul>
    </td>
        </tr>
    </table>
    </center>
    </body>
    </html>

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    #sddm div
    {	
    	visibility: hidden;
    	padding: 0px 0px;
    	margin: 0px 0px;
    	background: #EAEBD8;
    	border: 1px solid  #000}
    
    	#sddm div a
    	{	
    		display: block;
    		
    		padding: 0px 0px;
    		margin: 0px 0px;
    		white-space: nowrap;
    		text-align: left;
    		text-decoration: none;
    		background:  #FFF;
    		color: #000;
    		font: 12px Verdana, Geneva, sans-serif}
    Remove the 3 odd closing div tags and add an opening body tag

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles