Problem centering UL menu.

aHhh!

[PupChow]

I am having the hardest time centering things in CSS. For some reason, my CSS built nav menu refuses to center to the page... I am hoping one of you gurus can help me out and let me know what I have done wrong or did not do!

The resulting page is here: [liondancedatabase.org...]

Thank you for your help! I am pulling my hair out...

==============================================
#top { text-align: center; width: 850px; background: #fff; margin-left: auto; margin-right: auto; }

#nav { text-algin: center; width: 850px; background: #fff; margin-left: auto; margin-right: auto; }

#nav ul { list-style: none; padding: 0; margin: 0; text-align: center; margin-left: auto; margin-right: auto; }

#nav li { float: left; margin-left: 5px; margin-right: 5px; }

#nav li a {float: left; color: #858585; text-decoration: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size:14px; }

[daosmith]

I think the problem here is that <ul>s are block elements... so they take 100% of the available width unless you tell them otherwise. If you give your <ul> the appropriate pixel width in your CSS this should solve your problem.

Also, just a suggestion: rather than floating your <li> elements you could change their display value to inline (although you will need to change the margins to paddings as inline elements don't have margins) - this may save headaches later because of the many problems IE seems to have with rendering floats correctly.

Hope this helps :)

[PupChow]

Thank you!

I have also changed them to display:inline as well. I am just wondering, if display:inline works the same way and IE can render it correctly, why are all the tutorials for CSS menu still suggesting the use of float:left? Is this a relatively new technique?

[doodlebee]

>>if display:inline works the same way and IE can render it correctly, why are all the tutorials for CSS menu still suggesting the use of float:left?<<

That depends on what kind of menu you are using. For example, Son of Suckerfish menus use float:left because there are other contributing facors to using it. If it's somply a matter of just having links across the top of your page, with no dropdown (as you have), display:inline would work just as well as a float:left. But when you factor in dropdown lists and such, float:left is a better option.

I didn't see the page before you fixed it with the suggestion, but just in case, if you *do* choose to float the items left, you need to be sure you clear the floated links - othersie it *will* mess up your page (you might have done this, I don't know...but I thought I'd note it just in case.) Plus, when floating, it might help to put the navigational bar in it's own div and add "margin:0 auto" for that div - it helps to center the ul on the page.

Hope these multiple suggestions help you out in the future - but it lookslike the other guy got ya fine :)