Tools Debugging CSS in Internet Explorer

Question

Are there tools other than Firebug Lite that might help one get into Internet Explorer's buggy little mind and find out precisely where and why it's mangling my CSS so badly?

Firebug Lite is a useful tool of course, but it seems to be missing the crucial feature (present in the 'full' Firebug plugin) that allows you to see which parts of which declarations are ignored in favor of other declarations.

For example, using Firefox with Firebug I can see that .foo {color: red} is overridden by .bar {color: blue} later in the stylesheet.

But, Firebug lite only seems to show the final, calculated style -- I can't tell which declarations are being ignored, which are being overridden, which aren't supported at all, and which are just plain buggy.

Is there another tool that might be helpful here?

Answer 1

I am using IE8 Developer Tools (which is included out of the box), it can show style tracing.

IE7 have also Microsoft-supplied add on called IE Dev Toolbar. Have not used this extensively though.

What version of IE are you using?

Answer 2

Yes. In IE8 hit F12. In previous versions, install this.

Answer 3

The developer tools included with IE8 works quite well.

Answer 4

I don't know if it has the ability to check specific css overriding, but I'd start out the Internet Explorer Developer toolbar

Answer 5

Another one is the Debug Bar. Works in IE 7 or 8; and is similiar to Firebug

Answer 6

I have found jQuery to be helpful in figuring out what's going on "under the hood" so to speak. For instance, I had a situation recently where I found that I could not trust the Developer Tools that come with IE 8 (which, by the way, I was running in IE 7, standards not quirks, compatibility mode. Some CSS properties declared in the stylesheet were not being shown as computed, in addition to other IE-strangess I was experiencing. So, I just threw some javascript on the page, including jQuery, which would allow me to type up some code and have it evaluated without relying on IE Developer Tools, Firebug or the Web Inspector in Safari. You can evaluate statements like:

$('body').css('background-image');

which might return:

'/images/default_background.png'

or whatever.

YMMV, but it's worth the time to try it.