irichard

# August 5, 2009 at 9:43 am

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

# August 5, 2009 at 12:22 pm

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

# August 5, 2009 at 12:38 pm

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

# August 5, 2009 at 1:29 pm

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

# August 5, 2009 at 2:15 pm

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.

apostrophe

# August 5, 2009 at 2:22 pm

This reply has been reported for inappropriate content.

First a caveat: my pc is packed away, ready for moving to a new appartment next week, and I’m on the mac (which I will keep running until the last possible moment :D ), so I haven’t seen the footer in ie and none of this is tested in ie.

Just from reading what you posted and the comments in the link you gave, I think your problem is coming from this rule in pageContent.css

Code:

ul li {
float:left;
}

The obvious solution is to add float:none; to ul#horizontal-list li in pageLayout.css. But of course that messes a few other things up, so after a bit of jiggery pokery this is what I came up with:

Code:

ul#horizontal-list {
margin:5px 0 7px;
min-width:700px;
text-align:center;
}

ul#horizontal-list li {
color:white;
display:inline;
float:none;
font-size:8pt;
padding:0 3px;
}

Now that’s not pixel perfect with what you now have in firefox, but if it solves the centering problem in ie then it’s close enough for an ie specific stylesheet.

irichard

# August 5, 2009 at 3:49 pm

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

apostrophe

# August 5, 2009 at 4:07 pm

This reply has been reported for inappropriate content.

Quote:

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

Yes but then I would have to buy a copy of windows, and consequently subsidise microsoft :x . This way I have an old 2nd hand laptop, which didn’t cost much more than a windows license, with just enough space on it to run xp, ie6, 7 and 8 for testing purposes, and a 30gb partition to play with ubuntu :D .