Just when I thought my site was working right, it screws up in IE7

Question

I thought I'd done quite well, my site passed XHTML1.0 strict validation and worked flawlessly in IE6 as well as looking fine in IE8 & Chrome. I glibly thought that it it worked in IE6 & 8, IE7 was bound to be OK. But on checking I see one of my has a scrollbar in IE7, the seems about 200% as wide as it should be... the content is fine but you can scroll the whole . 2 separate pages have this issue, a 3rd does not, even though all pages use the same layout template - the main difference on the 2 that break is a floated div.

Are there known issues specifically in this area (floating) with IE7?

edit: here's the live site, please be kind :).

update: tested in FF3 and it works there fine too. So Chrome, FF, IE8 and even IE6 all work flawlessly, but IE7 has some nasties. update: IE8 compatibility mode also introduces the exact same behavior.

Answer 1

Hi John, try setting the width of your pageContent div using em's or px. You may have to enter in a specific css rule for IE7 (I believe its * + html {css rule}. From looking at the markup it seems no width property has been set.

Alternatively a quick fix would be to add a meta tag to force the page to always render in IE8 mode:

You can find more on this here:

http://blogs.msdn.com/b/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

Hope that helps

Answer 2

After a bit of fiddling I was able to find a solution by adding the following

html {
    overflow:auto;
}

I'm actually not sure what exactly caused the problem in the first place, but good luck to you with future IE debugging!