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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    Vertical menu shifts 2px in IE when hovered

    In IE my vertical menu shifts 2-3 pixels when I hover over any list item with a second level. How do I make it stop? It works fine in Firefox.

    Here's my code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>SBH Menu Experiments</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    startList = function() {
    	if (document.all && document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    			node.onmouseout=function() {
    				this.className=this.className.replace
    				(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    </script>
    <style type="text/css">
    body { background: #fe9 url(images/blueback.jpg) repeat-y; margin: 0; padding: 0; }
    body * { margin: 0; padding: 0; text-decoration: none; }
    #nav { width: 149px; position: absolute; left: 0; top: 0; padding-top: 200px;
    	background: transparent url(images/sbhbrand.gif) no-repeat left top; }
    #nav li { width: 149px; text-align: right; list-style-type: none; text-transform: uppercase; position: relative; }
    #nav a { display: block; padding: 6px 10px; width: 129px; color: #fff; font: bold .8em/1.2em "Trebuchet MS", Arial, sans-serif; }
    #nav a:hover, #nav a:focus { background-color: #aec5e4; color: #258; text-decoration: none; }
    
    /* 2nd-level navigation */
    #nav li ul { position: absolute; left: 150px; top: 0; width: 149px;
    	background-image: url(images/blueback.jpg); display: none; }
    #nav li ul li {text-align: left;}
    #nav li:hover ul, #nav li.over ul { display: block; }
    
    </style>
    </head>
    
    <body>
    <ul id="nav">
    <li><a href="directions.html">Directions</a>
    <!--directions submenu-->
    	<ul>
    	<li><a href="directions_sail.html">Sailing Instructions</a></li>
    	<li><a href="directions_drive.html">Driving &amp; Parking</a></li>
    	<li><a href="directions_public.html">Public Transportation</a></li>
    </ul>
    <!--end directions submenu-->
    </li>
    <li><a href="berthing.html">Berthing</a>
    <!--berthing submenu-->
    	<ul>
    	<li><a href="rates.html">Rates</a></li>
    	<li><a href="reservations.html">Reservations</a></li>
    	<li><a href="waitlist.html">Waiting List</a></li>
    </ul>
    <!--end berthing submenu-->
    </li>
    <li><a href="regulations.html">Rules &amp; Regulations</a></li>
    <li><a href="newsletters.html">Newsletter</a></li>
    <li><a href="services.html">Harbor Services</a></li>
    <li><a href="links.html">Local Links</a></li>
    <li><a href="improvements">Planned Improvements</a></li>
    <li><a href="faq.html">F.A.Q.</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="index.html">Home</a></li>
    </ul>
    </body>
    </html>
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Add float:left; to #nav li

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    Problem solved

    Thanks very much. That fixed it! Why does that work?

    How does the code look in IE7?
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    floating prevents child elements affecting the parent. Usually you will need to use clear to move the child away from the parent.

    Looks OK in IE7. Except for the poor color difference with the text and background in all browsers.


  •  

    Posting Permissions

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