Drop down spacing different on Mac...

Discussion in 'Web Design and Development' started by jmfavero, Dec 3, 2008.

  1. jmfavero macrumors newbie

    Dec 3, 2008
    OK, so I recently got into the Mac end of the web design world. I'm really excited to be onto the light side of things, but my problem is, the dark side shows my website as I originally intend.

    When I view my site on Firefox on the PC side of my machine, it displays perfectly, not so much on my Mac side. If I look at it on Safari, it shows up incorrectly regardless of the side of the machine I'm using.


    Why does it display my drop downs not in-line. When you hover over "About Us", the drop down menu cascades directly below that category, lining up on the left side. Any other drop down you hover over, it lines up completely wrong. I have the css set up so the categories stretch the width of the website window, but I need to blow up the numbers for it to be correct, and even then it's not right... Obviously I don't want to break what already works right on many other platforms and browsers, but i DO want to make it look right for my Mac and safari users.

    The current CSS reads (elements in red are what control the spacing in the menu:

    /* Dropdown Header Menu Section*/
    .label {display:none;}
    .dropmenu {width:747px; font-size:12px; white-space:nowrap; clear:both; background-color:#060; border:solid #333; border-width:0px 1px 1px; z-index:100;}
    .dropmenu ul {margin:0px; padding-left:0px; display:block;}
    .dropmenu ul li {margin-left:0px; list-style:none; display:block; width:98%; display:inline; margin:0px;}
    .dropmenu li ul {display:none; position:absolute; top:83px; left:11px; width:100%; background-color:#fff;}
    .dropmenu li > ul {top:auto; left:auto;}
    .dropmenu ul li:hover ul, .dropmenu ul li.over ul {display:block; border:solid #000; border-width:0px 1px 1px 1px; margin:0px;}
    .dropmenu a {padding:2px 8px 3px; text-decoration:none; color:#fff; display:block; float:left; font-size:80%; border:solid #919191; border-width:0px 1px 0px 0px;}
    .dropmenu li ul a {color:#000; padding:0px 0px 0px 5px; text-decoration:none; display:block; font-size:80%; width:97%; border-right:none;}
    .dropmenu a:hover {color:#fff; background-color:#004a00;}
    .dropmenu li ul a:hover {text-decoration:none; color:#fff; background-color:#060;}
    .dropmenu:after {content:"."; display:block; height:0px; clear:both; visibility:hidden;}

    #drop1,#drop2,#drop3,#drop4,#drop5,#drop6,#drop7,#drop8,#drop9 {position:absolute; top:89px; background-color:#eee;}
    #drop1 {left:37px; width:170px;}
    #drop2 {left:104px; width:270px;}
    #drop3 {left:170px; width:215px;}
    #drop4 {left:278px; width:250px;}
    #drop5 {left:338px; width:190px;}
    #drop6 {left:440px; width:265px;}
    #drop7 {left:561px; width:185px;}
    #drop8 {left:512px; width:213px;}
    #drop9 {left:574px; width:200px;}
  2. angelwatt Moderator emeritus


    Aug 16, 2005

Share This Page