PDA

View Full Version : ul menu won't center



Excavator
Jan 18th, 2007, 10:48 PM
Why won't FireFox center this ul menu?
It looks right in IE7.

http://www.nopeople.com/vapor/

Obolopo
Jan 18th, 2007, 11:18 PM
Not sure. Try adding:


#navlist ul {
align: center;
}

VIPStephan
Jan 18th, 2007, 11:26 PM
There is no align property in CSS.



ul {text-align: center;}
li {display: inline;}
a {
no display: block;]
}

Obolopo
Jan 18th, 2007, 11:34 PM
Yes, I know. I wasn't paying attention nor looking at my screen. I thought I had already typed "text-".

Graft-Creative
Jan 18th, 2007, 11:36 PM
You have the order of your margins wrong:


#navlist {
width: 660px;
height: 18px;
margin: 60px 0 auto 0;
}

Should be in this order: top, right, bottom left:


#navlist {
width: 660px;
height: 18px;
margin: 60px auto 0 auto;
}

Kind regards,

Gary

Excavator
Jan 19th, 2007, 12:06 AM
Good catch Graft-Creative, putting the margins in the right order centers the ul... duh!
Now why is the 60px on top pushing the whole wrapper div down, instead of leaving the wrapper and header up and moving the ul down like IE7 is doing?

Excavator
Jan 19th, 2007, 12:15 AM
VIPStephan,
I made the changes you suggested and it's centering now.
Still not pushing the ul down 60px though - it pushes the whole #wrap down 60px instead.

I'm looking at it in FireFox 2.0

VIPStephan
Jan 19th, 2007, 12:16 AM
That's because of the collapsing margins (http://www.complexspiral.com/publications/uncollapsing-margins/)... kind of.
The solution is to either put a top border or some top padding (can be as few as 1px) to the parent element (wrapper in this case).

Graft-Creative
Jan 19th, 2007, 12:23 AM
Not sure why, but try this instead:


#navlist {
width: 660px;
height: 18px;
margin: 0 auto;
padding-top: 60px;
}

Can't really explain why that works, I just play it by ear :)

Gary

VIPStephan
Jan 19th, 2007, 12:40 AM
Gary, perhaps you should also read the article I linked to in my last post? ;)

Excavator
Jan 19th, 2007, 12:46 AM
padding-top: 60px;
is going to mess with any text that goes above the ul menu... I don't know what's going up there but I'm sure there's going to be an <h1>something</h1>

Excavator
Jan 19th, 2007, 01:01 AM
That's a good article VIPStephan, goes into the bookmarks for sure.
I think this is the first time I've run into it and now I'm wondering why...

Oh well, the offending div was not #wrapper but #header. A border fixes it so I'm happy! Have a look at the original link (http://www.nopeople.com/vapor/) to see it working.