SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Browser issues with alignment

    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. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    ul#nav2{
        margin: 0 auto;
        background: url(../images/nav-bg.jpg) repeat-x;
        height: 36px;
        line-height: 36px;
        font-size: 11px;
        color: #fff;
        position: relative; /*New containing block for AP sublist*/
    }
    
    ul#nav2 li{
        /*display: inline;*/
        /*position: relative;*/
        float:left;
        
    }
    
    ul#nav2 li a.left-margin{
        margin-left: 14px;
    }
    
    #nav2 a{
        float:left;
        height: 36px;
        line-height: 36px;
        color: #ffffff;
        padding:0 5px;
    }
    
    ul#nav2 li a:hover, ul#nav2 li#currentpage a{
        background: #B1C42A;
        color: #000;
        /*padding: 12px 5px;*/
    }
    
    ul#nav2 li .sub {
        position: absolute;
        left:0;
        top: 36px;/*24px;*/
        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;
    }
    
    /*DISABLE ALL THE LEFT OFFSETS*/
    
    /*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;
    }*/

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. Thank you so much for taking the time to look at that. Works like a charm.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Your Welcome, glad it worked out for you!


Tags for this Thread

Bookmarks

Posting Permissions

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