Browser issues with alignment

HTML & CSS
1

So I have created a super dooper hover drop down menu. It has absolute positioning. And has a few pixel difference from Firefox to the others (Safari, Chrome, IE). Firefox displays how I want it.

It’s weird because the “Find the Right Product” hover positions properly on both. But the others are off. Not sure what’s going on or that I have coded wrong here.

Check it out at http://www.gosandbox.com/tp

Any help would be awesome. Thanks in advance!

2

Hi,
You are setting all your left: coordinates differently on the .sub classes. It is basing that off of a fluid width LI which is setting it’s width from the text in the LI.

Since the text is not exactly the same in all browsers that can cause your sublist position to be off slightly.

Here is what I would suggest you try.

Remove the relative position from your LI ( that is the containing block for the AP sublist) and then move it to the UL instead.

Now you should be able to eliminate all the different left: positions and just set left:0 on the sublist as well as resetting it to top:36px

Untested but this should work:

ul#nav2{
    margin: 0 auto;
    background: url(../images/nav-bg.jpg) repeat-x;
    height: 36px;
    line-height: 36px;
    font-size: 11px;
    color: #fff;
    [COLOR=Blue]position: relative;[/COLOR] [COLOR=DarkGreen]/*New containing block for AP sublist*/[/COLOR]
}

ul#nav2 li{
    [COLOR=Red]/*display: inline;*/
    /*position: relative;*/[/COLOR]
    [COLOR=Blue]float:left;[/COLOR]
    
}

ul#nav2 li a.left-margin{
    margin-left: 14px;
}

#nav2 a{
    [COLOR=Blue]float:left;
    height: 36px;
    line-height: 36px;[/COLOR]
    color: #ffffff;
    [COLOR=Blue]padding:0 5px;[/COLOR]
}

ul#nav2 li a:hover, ul#nav2 li#currentpage a{
    background: #B1C42A;
    color: #000;
    [COLOR=Red]/*padding: 12px 5px;*/[/COLOR]
}

ul#nav2 li .sub {
    position: absolute;
    [COLOR=Blue]left:0;
    top: 36px;[/COLOR][COLOR=Red]/*24px;*/[/COLOR]
    z-index: 99999;
    background: #fff;
    padding: 10px 10px;
    margin: 0;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    display: none; /*--Hidden for those with js turned off--*/
    border: 3px solid #B1C42A;
    width: 914px;
    line-height: 12px;
    color: #000;
}
[COLOR=Red]
/*DISABLE ALL THE LEFT OFFSETS*/[/COLOR]
[COLOR=Red]
/*ul#nav2 li #ddProduct.sub{
    left: -148px;
}

ul#nav2 li #ddPerform.sub{
    left: -311px;
}

ul#nav2 li #ddTherapyX.sub{
    left: -620px;
}

ul#nav2 li #ddVideo.sub{
    left: -701px;
}

ul#nav2 li #ddPro.sub{
    left: -761px;
}*/[/COLOR]
3

Wow. Thank you so much for taking the time to look at that. Works like a charm.
:p:p:p:p:p:p:p:p:p:p:p:p

4

Your Welcome, glad it worked out for you! :wink: