SitePoint Sponsor

User Tag List

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

    Safari CSS and Drop Down menu

    I can't figure out why my drop down menu causes items in the menu bar to not appear, and causes items in the drop down menu to only appear when they are hovered over.

    I am using the Yahoo User Interface v2.3.1 to render the drop down menus. The menus display perfectly in IE6, IE7, FireFox, and Opera, but not in Safari.

    My site can be found at http://www.wegoall.com

    The stylesheet can be found here.

    Lines of interest may be found here:

    Code:
    #sitemenu {
     visibility: visible;
    }
    #menuContainer {
     width:    590px;
     height:    30px;
     display:   block;
     padding:   0;
     margin:    0;
     list-style:   none;
     list-style-type: none;
     position:   absolute;
     right: 10px;
     bottom: 0px;
     _bottom: -3px;
     text-align:   center;
     z-index:   99; 
    }
    #menuContainer li.yuimenubaritem {
     float:    left;
     margin:    0 0 0 5px;
     padding:   0;
     line-height:  1.4;
    }
    #menuContainer li.yuimenubaritem a.yuimenubaritemlabel {
     display:   block;
     color: #fff; 
     text-decoration: none; 
     font: bold 16px arial, verdana, helvetica;
     text-align:   center;
     width:    112px; 
     padding:   5px 0;
     display:   block;
     background-image: url(../images/tab_10_21_07-2.gif);
     background-repeat: no-repeat;
     background-position: center left;
     margin:    0;
     _padding: 5px 0 3px 0; 
    }
    #menuContainer li.yuimenubaritem a.yuimenubaritemlabel {
     background-position: middle left;
    }
    #menuContainer li.yuimenubaritem a.yuimenubaritemlabel.current {
     background-position: bottom left;
    }
    #menuContainer li.yuimenubaritem a.yuimenubaritemlabel:hover,
    #menuContainer li.yuimenubaritem a.yuimenubaritemlabel:active,
    #menuContainer li.yuimenubaritem a.current,
    #menuContainer li.yuimenubaritem a.yuimenubaritemlabel.selected {
     background-position: top left; 
    }
    div.yuimenu div.bd ul {
     border-width: 1px 1px 0 1px;
    }
    div.yuimenu div.bd ul.first-of-type {
     border-width: 0 1px 0 1px;
    }
    div.yuimenu div.bd ul, div.yuimenu {
     border-style: solid;
     border-color: #DA4950;
    }
    div.yuimenu {
     background : #D32931;
     color  : #fff;
     width  : 210px;
     border-style: solid;
     border-color: #DA4950;
     border-width: 0 2px 2px 0;
     text-align : left;
    }
    div.yuimenu div.bd ul li.yuimenuitem a.yuimenuitemlabel {
     color  : #fff;
     font-size : 15px;
     padding  : 6px 6px 6px 24px;
     _padding : 5px 1px 0 22px;
     _margin-bottom: 0;
     _height: 26px;
     display  : block;
    }
    div.yuimenu li a.yuimenuitemlabel.selected {
     background-color: #DA4950;
     text-decoration : none; 
    }
    Any help would be greatly appreciated!

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope you don't mind me asking, but why are you using a menu that relies on hacks and browsers' error handling routines to make a dropdown menu when better alternatives are out there?

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I really want to use the Yahoo User Interface. I don't think it usually relies on hacks when used normally, but I am hacking their CSS for drop down menus so that I can display them differently.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I think this is more a JS question than a css one as the top menus appear if the JS is turned off.

  5. #5
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It may be a mix of both, but what happens is that the Yahoo User Interface applies several classes to the menu and menu items when it is loaded.

    Is there a tool that is similar to FireBug for FireFox that will work in Safari? If there is, I could probably figure this out.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    When I use these 2 lines of html which are from the generated source of the page then Safari seems to work ok.

    Code:
    <div id="sitemenu" class="yuimenubar yuimenubarnav yui-module yui-overlay visible" style="visibility: visible; z-index: 1; position: static; display: block;">
                <div style="overflow: visible; height: auto;" class="bd">
                    <ul id="menuContainer" class="first-of-type">
    I'm not sure whether there will be any ill effects but it might point you in the right direction.

  7. #7
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, you are the man. When I plugged that code into my application, it worked perfectly.

    Do you have any addons suggestions or tips on how to debug CSS in Safari?

    Also, I don't ever use Safari for anything other than to make sure it renders my pages correctly. I've noticed that it causes all of the text in my pages to be a bit bolder than in other browsers. Do you know why this might be? I've got my Appearance->Font Smoothing set to "Light".

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Other than staying away from styling form controls (aside from basic styling like backgrounds - if even that), you'll find that most of the time Safari will render pretty closely to what Opera and Firefox are displaying.

    Most of the time though, if you have a problem with Safari, it'll usually take a minor adjustment in how the code is written to "fix" Safari without breaking the other browsers. This is one of the reasons why I test in all fiour major rendering engines as I go along with each section of the Web page (for the template, as well as individual pages).

    For those rare times when you cannot do this, or try something like what Paul did (or try it and it fails), you can always use some CSS 3 to target Safari 2 while ignoring Opera, Firefox, and Safari 3 - for now anyway.

    http://thomas.tanreisoftware.com/?p=11 (this is a last resort - think of it as your "nuclear option")

    As for the font rendering, that's how Macs handle fonts in the first place. Which happens to be a reason why they're favored by print and graphic professionals. Even the Windows beta for Safari 3 uses the Mac UI to render the fonts like they would appear on a Mac - something I'm actually greatful for.

    (I can't believe my browser crashed - I had to re-write this, and the "rewrite" is nowhere near as elegant or thorough as the original. )


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
  •