IE8 Developer Tools not displaying Style info

Question

I'm running into an issue with IE8 developer tools where they Style information is not displaying in the pane when I select an element. It is definitely page specific as I can switch to another page and the styles will appear for that page when I select an element.

Strangely, if I add an inline style to an element, the inline element will display in the style pane. The page finds the CSS files just fine since the page is rendering with the styles.

Anyone else encounter such a problem? If it helps, the page I'm developing is a Joomla template. I'm currently doing the process-of-elimination by deleting half the code, then the other half to identify the culprit code but I'd thought I'd throw this out to see if anyone else knows. Thanks everyone.

Answer 1

I saw others mention similar problems in other forums and the common issue has to do with a link tag to an external stylesheet. In my case, it was a Google Fonts Directory link.

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css' />

Removing the link temporarily allowed to style information to display.

Answer 2

I had a similar issue when a stylesheet had an include statement for another stylesheet that did not exist.

Answer 3

Try refreshing the Developer Tools' DOM cache - 4th button in the toolbar, the hotkey's F5. If the element's styles change after the Dev Tools window is opened, the actual DOM and the reported one can differ.

Answer 4

I ran into the same issue and found that developer tools was freaking out on my Typekit JS in the head. There was nothing wrong with it. Developer tools was just being finicky. Imagine that. I commented it out and viola, it worked again.

Another buddy of mine said he had seen developer tools freak out when an HTML tag wasn't closed properly so that might be another thing to look for.