Search code examples
htmlcsscross-browserinternet-explorer-7

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


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.


Solution

  • 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:

    Link

    Hope that helps