Question

I noticed the layout of a website is all jacked up when viewing in IE8 in compatibility mode (assuming this means IE7 and/or IE6 as well) compared to viewing it in IE8 and Firefox. Since the site renders fine in IE8 and Firefox, I’m guessing that means I need to override certain styles for IE6/IE7. Are there any tools that I can use like Firebug in FireFox to analyze what CSS settings are jacked up in IE?

The website is [link redacted per request of site owner]…

Any ideas as to what settings should specifically be targeted here?

EDIT
Just found the developer tools in IE8… I’ve noticed that this CSS setting appears to be the culprit, but I’m not sure why. “.three-columns” is the name of the class being applied to the bottom part of the website.

HTML > BODY .three-columns
{
   height: auto;
}

Answer 1

You could use the IE8 Developer Tools:

http://msdn.microsoft.com/en-gb/library/dd565628(VS.85).aspx

I would recommend downloading IE6 and IE7 Virtual PC images from the link below rather than relying on IE8s backwards compatability mode:

http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

Putting a top of 0px for the three-columns class seems to fix it.