Website layout issue in compatibility mode

Question

I noticed that the layout of the website took off when viewed in IE8 in compatibility mode (assuming it means IE7 and / or IE6) compared to browsing in IE8 and Firefox. Since the site works fine in IE8 and Firefox, I assume that this means that I need to override certain styles for IE6 / IE7. Are there any tools that I can use, like Firebug in FireFox, to analyze which CSS settings are tinted in IE?

Website [link sent at the request of the site owner] ...

Any ideas on which settings should specifically be targeted here?

EDIT
Just found developer tools in IE8 ... I noticed that this CSS option is the culprit, but I'm not sure why. ".three-columns" is the name of the class applied to the bottom of the website.

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

Answer 1

You can use 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 compatibility mode backwards:

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

Putting a 0px vertex for a three-column class seems to fix it.

Answer 2

There is always FireBug Lite:

http://getfirebug.com/lite.html

It's not as good as the full version of Firefox, but it can get you out of the hole.

Hope this helps

Answer 3

Using the IE8 developer tools (press F12 or Tools → Developer Tools) will allow you to edit the page in real time in any of the modes. You can add new styles and disable them in the same way as in firebug (although you do not receive traffic / load hits).

Answer 4

There is an FF plugin called IE View , but I'm not sure how this works with Firebug.

Unfortunately. In fact, the plugin I wanted to show is the IE tab .