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?

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?

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.

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:

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 .

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.