Center Aligning Difficulties

Why won't my menu bar center align? http://www.graphics-forum.com/manicpyro

Because there is no tag around the menu bar that tells it to center.

Love the style choice, it's very relaxing.

Hi Antonio;

It is aligned left because the links width is undefined
and you are foating the containing unordered list left.

Try these changes:
(you may need to play with the numbers)
#links{
margin: 0 auto;
padding: 0px;
width: 612px;
text-align: center;
}
#links ul {
border: none;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
}
#links ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#links ul li a {
background: #B2B2B2;
width: 122px;
height: 2em;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
border-bottom: 1px solid #808080;
border-right: none;
padding: 0;
margin: 0 0 10px 0;
color: #424242;
text-decoration: none;
display: block;
text-align: center;
line-height: 2em;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: x-small;
}


Also; I would change the name links since I believe links is a collection
(document.links) and is probably a reserved word and could cause
unexpected problems.

.....Willy

Originally posted by Antoniohawk
Why won't my menu bar center align? http://www.graphics-forum.com/manicpyro
Hey man, nice site, very simple. ;)

Q.First up, how does #links differ from #title and #content? (The other elements on which margin:0 auto; is effective).
A. The other div's have a fixed width. I added width:600px; to #links and it's all good. (sort of...you'll see)

My guess is that trying to give an element with an undetermined width margin:auto, which is nested inside another element without a fixed width (body/viewport) is either against W3C guidlines or causing the browser to bug out.
Another solution to giving all elements a determined width may be to assign a 100% width to the body tag. This is untested and may very well cause other problems, especially regarding accessibility.

Andrew.

*edit: LOL Willy! I type too damn slow :(

Originally posted by mindlessLemming
*edit: LOL Willy! I type too damn slow :(

I didn't bother to check my spelling! :o

.....Willy

Guess where that menu bar is coming from...
(Hint: ALA (http://www.alistapart.com/) ).

Update:

while you're borrowing from the best anyway: ala uses a wrapper div around the whole page which has a set width and margin-left and -right: auto, which centers every box inside the wrapper nicely.