Space under menu bar in firefox and safari

[gilbert02]

Hi there!  First of all, FABULOUS plugin.  I’m a newbie and even I was able to, through trial and error, modify the CSS to make it be what i wanted. 

My test site is: http://www.amiprice.com/weblog 
I’m using the Neoclassical wordpress theme.
The menu is displaying correctly in all browsers, and looks perfect in IE, but in Firefox 2.0 and Safari 3.1.2 it seems as if the white space under the menu isn’t being driven by my code (both browsers look the same).

Here is the CSS I have in my settings:

#suckerfishnav {
    background: repeat-x;
    font-size:11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family:georgia,sans-serif;
    margin:0 auto;width:885em;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:25px;
    padding-bottom:7px;
margin:0 auto;width:885em;
    }
#suckerfishnav a {
    display:block;
    color:#000000;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:151px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    }
#suckerfishnav li li {
    width:149px;
    font-family:georgia,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:149px;
    font-family:georgia,sans-serif;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 150px;
    }
#suckerfishnav li li:hover {
    background:#ffffff;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#000000;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#000000;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#000000;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#ffffff;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#ffffff;
    }

I created a new div for the formatting too in my style.css sheet.

#nav_bar { width: 885px; margin: 7px 0 15px 0; }

The plugin itself is in a separate php file (it was easier to format that way in my template than adding it into the header): nav_bar.php

All that that file says is:
<div id ="nav_bar">
<?php if (function_exists(‘suckerfish’)) {suckerfish();} ?>
</div>

I am sorry if I am asking a stupid question, but hours of trial and error hasn’t produced that perfect result yet, so any help you might have would be VERY appreciated.

Thank you so much for an amazing plugin!

[gilbert02]

I’m sorry, one last thing – I tried your code from a previous post to center it, but I think I’m doing something wrong.  If you could point me in the right direction there too, I’d be so grateful.

Thank you again!

[imported_Ryan]

The first thing I can see is that you have a carriage return before your Doctype. That is bound to cause problems in IE. The Doctype must be the first thing in your document.

Working on the rest of it now …

[imported_Ryan]

The reason you haven’t managed to center it, is because your width is absolutely massive! 885em will be WAY off the edge of your screen. I think you were wanting 885px. 885em is roughly equivalent to 8000 pixels or so.

To add some white space below your menu, try adding margin:0 auto 20px auto (where 20px is the gap underneath the menu and 0 is the gap above) instead of margin:0 auto:

Your current CSS:
[code:32hiyvt5]#suckerfishnav {
    background: repeat-x;
    font-size:11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family:georgia,sans-serif;
    margin:0 auto;width:885em;
    }[/code:32hiyvt5]

What I’m suggesting:
[code:32hiyvt5]#suckerfishnav {
    background: repeat-x;
    font-size:11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family:georgia,sans-serif;
    margin:0 auto 20px 0;
    width:885px;
    }[/code:32hiyvt5]

[gilbert02]

thank you so much for your help! that did, in fact, fix the space underneath and now all three browsers are acting the same. 

it’s still not centering, even though I copied your exact code, but I think I can live with leftaligning. 

thank you again!  very much appreciate your help.

[imported_Ryan]

Did you adjust the width to something smaller? The width has to be the width of the menu contents, not the width of the page. If it is the width of your page it won’t work at all.

[gilbert02]

i did adjust the width to various widths, from 600px to 885px (which is the width of my container).  no centering.  it must be something else in my css file that is conflicting.

[Author]

Posts