Centering problems

[Anonymous]

I’m currently building a blog for a lawyer friend, and am trying to use suckerfish, but can’t get the drop down menus to center with the rest of the site.

http://www.americancourthouse.com

here is the css:

#suckerfishnav {background-color:#323232;font-family:verdana,sans-serif;font-weight:bold;font-size:1.2em;}
#suckerfishnav, #suckerfishnav ul {float:left;list-style:none;line-height:1;padding:0;border:0px solid #000;margin:0 0 1em 0;width:100%;}/*can specify a fixed width here if you want, ie: width:30em;*/
#suckerfishnav a {display:block;color:#eee;text-decoration:none;padding:0.25em 2em;}/*can specify a fixed width here for each first level button if you want, ie: width:10em; You must also modify the #suckerfishnav li as well*/
#suckerfishnav li {float:right;padding:0;}/*can specify a fixed width here for each first level button if you want, ie: width:10em; You must also modify the #suckerfishnav a as well*/
#suckerfishnav li ul {position:absolute;left:-99em;height:auto;width:10em;font-weight:normal;;margin:0;}
#suckerfishnav li li {padding-right:1em;width:9em;border-top:1px solid #000;}
#suckerfishnav li li a {padding:0.2em 1em;}
#suckerfishnav li ul a {width:9em;}
#suckerfishnav li ul ul {margin:-1.50em 0 0 10em;}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul {left:-99em;}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul {left:auto;background-color:#bbb;}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {background: #81AFD5;}

I have played with it and can’t get it to center.

Help!

[imported_Ryan]

Try changing this:
[code:2jvopgb9]#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
line-height:1;
padding:0;
border:0px solid #000;
margin:0 0 1em 0;
width:100%;
}[/code:2jvopgb9]

to this:
[code:2jvopgb9]#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
line-height:1;
padding:0;
border:0px solid #000;
margin:0 auto 1em auto;
width:20em;
}[/code:2jvopgb9]

That will give the menu a fixed width and center it via the margins. You will need to adjust the width to suit, 20em’s was just a guess.

It is very important to set the width in em’s, not px’s or pt’s as using anything else will cause the menu to goof when the user changes their text size. Also, make sure you test it in Safari, IE7 and Firefox/Opera as they all have different text widths and what may work in one, may be too skinny for the others.

[kimt]

I am having issues with centering also. I tried replacing that code but it still is on the left. Any ideas?

[imported_Ryan]

The code above should work fine. You just need to apply a width and auto horizontal margins.

If you leave a link to your site with the code you’ve tried so far I’ll see if I can find a fix for you.

[Author]

Posts