The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS Navigation Problem

Hi everybody,

I spent the whole weekend trying to figure out why my menu isn't centering properly. I followed a tutorial to create a menu with list items found in this forum (sorry but I can't remember where). The menu works perfectly but is not align correctly. Could anybody please help me?

You have used #navlist ul but there isn't an ul in an id of navlist. However there is a ul that has an id of navlist.

Therefore changing your code as follows should (?) sort the problem.

Code:

ul#navlist {
margin:0 0 10px 0;
padding: 0;
}

However I must point out that you are using quirks mode in IE and using text-align:center to center all your elements. This is fine for IE (and IE6 in quirks mode) but other browsers obey the rules and only use text-align:center to centre text not nested elements.

For other browsers you will need to use margin-left:auto and margin-right:auto on a fixed width element to allow it to centre.

You have used #navlist ul but there isn't an ul in an id of navlist. However there is a ul that has an id of navlist.

Therefore changing your code as follows should (?) sort the problem.

Code:

ul#navlist {
margin:0 0 10px 0;
padding: 0;
}

However I must point out that you are using quirks mode in IE and using text-align:center to center all your elements. This is fine for IE (and IE6 in quirks mode) but other browsers obey the rules and only use text-align:center to centre text not nested elements.

For other browsers you will need to use margin-left:auto and margin-right:auto on a fixed width element to allow it to centre.

Hope this helps.

Paul

Thanks for your prompt replies. It didn't quite work but I think I fixed it now. I changed from id to class targeting and it seems to work.

Changing the id to a class would make no difference (except for the inherrent differences of course). It would have no effect on the targetting - both class and Id would work. The only difference with an Id is that you can only use it once uniquely on a page. (However at this point in time all browsers ignore this and display it just like a class, although you would have prooblems if javascript routines targetted it etc.)

You had #navlist ul in your code which will look for a an unordered list that is within an id of navlist.
e.g.
This is what that would need to look like to work:

Code:

<div id="navlist">
<ul><li></li></ul>
</div>

But what you had was:

Code:

<ul id="navlist">
<li></li>
</ul>

There is no unordered list within the id of navlist. There is however, an unordered list thas has an id of navlist which would need to be targetted differently as follows.

Code:

ul#navlist

Which means look for ul that has an id of navlist - thats the difference from the first example. Changing the id to a class or vice-versa would make no difference.