views:

295

answers:

5

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;
}
A: 

There is a FF plugin called IE View, but I am unsure how this works with Firebug.

Sorry. Actually the plugin that I wanted to show is this one IE Tab.

Elzo Valugi
+3  A: 

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.

Supertux
+1  A: 

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 just like in firebug (though you don't get the traffic sniffing/load times though).

Joshua
Perfect! Thanks for that tip... Very firebug like :)
RSolberg
+1  A: 

There is always FireBug Lite:

http://getfirebug.com/lite.html

Its not as good as the fullblown Firefox version, but it can get you out of a hole.

Hope it helps

Crayonz