How to center a horizontal list???

[stoney_kun]

Hi All,

I have been trying to fix this for about an hour and a half :( I am trying to center an image-based horizontal list. It is centered in IE6/IE7 but not FF!!! is al the relevant stuff to help me out. Thanks in advance :)

http://www.stoneykun.com/nav/
http://www.stoneykun.com/nav/css/stylesheet.css



#navigation {
margin: 0;
padding: 0;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation ul li a {
height: 60px;
background-position: top left;
background-repeat: no-repeat;
display: block;
text-indent: -9999px;
}
#navigation ul li a:hover {
background-position: 0 -60px;
}
#navigation ul li#home a {
width: 97px;
background-image: url(../images/nav_home.gif);
}

[pixelSnobbery]

If you wrap the whole navigation div in a new div (call it navigationWrapper), then set the width of that div to however wide you want it, and margin-left:auto; margin-right:auto; it should work in ie and firefox :)

Not sure if there are better ways of doing it, but it always works for me!

[icio]

I looked into this a little while ago. Fortunately for both of us, Stu Nicholls is totally pro at things like this:

http://www.cssplay.co.uk/menus/centered.html
http://www.cssplay.co.uk/menus/centered2.html
http://www.cssplay.co.uk/menus/centered_float_left.html

[stoney_kun]

Thanks all.. The CSSPlay tutorial is definately the best as it required no additional markup and I didn't have to explicitly set a width :)

[icio]

Glad I could point you in the right direction :)