Trouble with shifting menu

HTML & CSS
1

Hi,

I have a navigation menu that uses <UL> and <LI> to present menu items and sub-menu items.

It works great in Chrome, FF, and Safari, however in IE8 and IE9-compatibility mode, the sub-menu items shift to the right 1-pixel.

I’ve tried numerous fixes that I found through Google, but none of them have worked.

Could anyone please take a look and let me know the error of my ways?

Thanks!


<div id="nav">
     <ul class="menu">
          <li class="level1-li-home"><a href="home.htm">Home</a></li>
	  <li class="level1-li">Level 1
	       <ul class="sub">   
		     <li><a href="linka.htm">Link A</a></li>
		     <li><a href="linkb.htm">Link B</a></li>
		     <li><a href="linkc.htm">Link C</a></li>
		     <li><a href="linkd.htm">Link D</a></li>
		     <li><a href="linke.htm">Link E</a></li>
		     <li><a href="linkf.htm">Link F</a></li>
		     <li><a href="linkg.htm">Link G</a></li>
		     <li><a href="linkh.htm">Link H</a></li>
	       </ul>
	  </li>
     </ul>
</div>


CSS:

#nav 
{
    height:28px; 
    width:650px; 
    margin: 0 auto;
    position:relative;
    z-index: 1000;
}   

a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}

#nav ul {margin:0 auto; padding:0; list-style:none; text-align: center;}
#nav ul.menu {margin:0 auto; position:absolute; overflow:hidden;}

#nav .menu .level1-li 
{
    float:left;
    width:210px;
    margin-top:-300px; 

}

#nav .menu .level1-li-home
{
    float:left;
    width:210px;
    margin-top:-300px;

}

/* menu item font properties */
#nav .menu a 
{
    display:block; 
    width:210px; 
    text-decoration:none; 
    text-align:center; 

} 

/* menu heading font properties */
#nav .menu a.level1-a 
{
    position:relative; 
    float:left; 
    margin-right:-209px; 
    margin-top:300px; 

} 


#nav .menu .sub 
{

    float:left; 
    margin-left: -1px; 
    margin-top:-28px; 
    padding-top:28px; 

}

#nav .menu .sub a 
{

    position:relative; 
    margin-right:-1px; 

    padding: 3px 0 3px 0;
}

#nav .menu a:hover,
#nav .menu a:focus,
#nav .menu#nav .menu a:active 
{

    margin-right:0; 

}
2

Thanks, after going through the CSS and simplifying it, I found the source of the problem.

It was the text-align: center attribute in #nav ul. After I removed that, it worked fine, with no pixel-shift, in all browsers!

Thanks!

3

Could you include a link to the page ion question. this always helps to pin point the source of the problem

4

You’ve got waaaaaaaay more CSS in there than you need. More code means more code who can break.

Try simplifying it first. And comment the submenu out while looking at cross-browser differences.

It’s probably about 5px off on my machine, simply because I can’t read tiny text and always increase text size. Is 1px difference extremely noticeable? (I remember an issue with IE regarding stuff being off by 1px, and that had to do with someone having an uneven number of pixels in the width)