Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

Browser Specific Problems: [Closed] Safari Not Rendering CSS Hover Menu

Bottom of Page

1 to 6 of 6

  1.  
    •  
      CommentAuthoradjustafresh
    • CommentTimeJan 7th 2008 edited
     permalink
    Okay guys... I need some help with a Safari 1.3 bug. I've done the browsercam virtual machine thing, and can't come up with a solution--or a reason that the menu would be rendering like this. I've tried various z-index settings, adjusting widths, heights, etc... I'm at a loss. The site has been checked and is working as expected in FF, IE6, IE7 and Safari 3.

    If anyone has access to Safari 1.3 (or just has a theory as to what's happening) and wants to take a crack at dissecting this bug, I'd appreciate the input.

    Thanks!
  2.  permalink
    bump?
    • CommentAuthorkloche
    • CommentTimeJan 9th 2008
     permalink
    Further to that you have some problems in Opera for Mac. Let me see if I can troubleshoot this thing..
    • CommentAuthoraxe_sosharp
    • CommentTimeJan 9th 2008 edited
     permalink
    The navigation doesn't work on Opera for Windows either.

    Not sure what the problem is as I am not familiar with the CSS method employed, plus I don't have a Mac either. However below is a quick hack at the CSS which, I know the presentation is not perfect, the dropdown does fire correctly in IE7, FF,Opera and Safari on Windows (IE6 would probably need some help).

    /* Primary Nav */

    #main-nav {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    }
    #main-nav li {
    float:left;
    margin-right: 30px;
    position: relative;
    padding:10px 0;
    }
    #main-nav li li {
    position: relative;
    padding:0;
    float:none;
    width:145px;
    }

    #main-nav a {
    color: #2A8DBE;
    text-decoration: none;
    }

    #main-nav a.active {
    color: #666;
    }

    #main-nav li ul {
    position:absolute;
    z-index: 100;
    display:block;
    left:-999em;
    width:145px;
    }

    #main-nav li:hover a {
    color: #666;
    }

    #main-nav li:hover ul {
    left:auto;
    left:0;
    border-top: solid 1px #CDCDCD;
    border-bottom: solid 1px #CDCDCD;
    }

    #main-nav li ul li a {
    background: url(images/bullet-hollow.png) no-repeat 5px center #FFF;
    display: block;
    width: 145px;
    border-left: solid 1px #CDCDCD;
    border-right: solid 1px #CDCDCD;
    }

    #main-nav li:hover ul li a {
    color: #2A8DBE;
    }

    #main-nav li ul li a:hover {
    color: #666;
    }

    #main-nav li ul li a:hover {
    background: url(images/bullet-solid.png) no-repeat 5px center #F3F3F3;
    }

    Might be worth seeing if it cures the Safari. If it does it shouldn't take much to get the presentation right across all browsers.

    John
    • CommentAuthorkloche
    • CommentTimeJan 9th 2008
     permalink
    Ok, well I have whipped up a cure and it seems to be pretty much all engines go on Mac

    <style>
    /* CSS Resets */



    /* Primary Nav */
    ul#main-nav { position: absolute;
    margin: 0px 0px 0px 0px;
    border: 0px solid #000;
    padding: 0px;
    width: 783px; /*For KHTML*/
    list-style: none;
    height: 39px;

    }

    ul#main-nav li {
    margin: 15px 30px 0px 0px;
    border: 0px solid #fff;
    padding: 0px;
    float: left; /*For Gecko*/
    display: inline;
    list-style: none;
    position: relative;
    background-color:#FFFFFF;
    height: 24px;
    }

    ul#main-nav ul {
    margin: 0;
    border: 0 none;
    padding: 0;
    width: 145px;
    list-style: none;
    display: none;
    position: absolute;
    background-color:#FFFFFF;
    border-bottom: 1px solid #000;
    top: 24px;
    left: 0;
    }

    ul#main-nav ul li {
    float: none; /*For Gecko*/
    margin:0px;
    display: block !important;
    display: inline; /*For IE*/
    }

    /* Root Menu */
    ul#main-nav a {
    border: 0px solid transparent;
    border-bottom: 0px solid #000;
    border-top: 0px;
    margin:0px;
    padding: 0 0px;
    float: none !important; /*For Opera*/
    float: left; /*For IE*/
    display: block;
    background: #fff;


    height: auto !important;
    height: 1%; /*For IE*/
    }

    #main-nav a {
    color: #2A8DBE;
    text-decoration: none;
    }

    #main-nav a.active {
    color: #666;
    }

    </style>
  6.  permalink
    Thanks guys!!!

    I think that we discovered a solution at about the same time (thank goodness for my browsercam account!)

    The Safari issue was that the <li> was not being floated, I had only set it to display: inline. With the <li> floated and the anchor switched to display: block. Safari is a happy camper once more (although it was working like a charm in the patest version of Safari).

    The Opera issue is related to display: none/display: block, which can be resolved with some absolute positioning, but this also requires even more hacks to get it working in IE6. IE6 takes precedence over Opera at this point.

    Thanks again!

1 to 6 of 6

  1.