Centering List Items Horizontally

[irichard]

Hi,

I have an unordered list that has been coded with the help of code that came from an old article Chris posted, http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/#comments.

The code Chris uses in the artice works well in Safari and Firefox, but I am having trouble using it with IE7. The list does not centre, instead it fixes itself to the lefthand edge of the div it is sitting in.

The link below shows the page (scroll to the bottom of the page to see what I mean). Does anyone have any suggestions on how I can correct this in IE?

http://www.rellis.co.uk/dev/clientsites/25seven/article_1.htm

Thanks in advance

Richard

[TheDoc]

A side note first, you don’t need the div of "navigationBar". There’s no point in having it there because the UL can be applied with those same styles. So instead of:

Code:

Go with:

Code:

As for the problem you’re describing, it shows perfectly for me in IE7. In IE6, however you have some problems.

[immel]

I can see that it’s off in IE7 compared to FF3.5, doesn’t look terribly bad but I know how annoying inconsistencies are.

If you read on the comments on the article itself there’s a lot of discussion about that it doesn’t work in IE6/7 and a few people trying out solutions with little success.

I think one of the problems is that IE7 doesn’t recognize min-width, I played around a bit with it but I couldn’t find a solution for you.

[irichard]

Thanks for the replies.

I am aware of the issues with IE6 (think it’s something to do with the container div?, but don’t have a version of IE6 to test with).

Thanks for the advice for the navigation div, I have already changed my code to what you recommended, thanks.

The nav in the footer aligns itself left only in IE (maybe IE6 also, but can’t test this) IE8 renders it fine, so my question is, could there be a rule in my CSS that IE7 does not like/ignores and can a solution be recommended?

Thanks

Richard

[Chris Coyier]

The problem is that display: table technique isn’t supported in IE-anything…

That article is pretty old and bad, haha. I think what I would do now is try to set the wrapping UL to "float: left", without setting a set width. A floated element will only grow as large as it needs to in width, then you could center it with margin: 0 auto; I’m not entirely certain that would work cross-browser, but it’s a good place to start at least.

[irichard]

Never use a PC myself, having a Mac running VMWare, is all I need ;)

.. That worked, excellent..

So adding the float: none; has solved the issue.

Thanks for you help

[Author]

Posts