CSS styles not applied on dynamic elements in Internet Explorer 7

Question

When we render dynamic elements with Javascript in IE7, the CSS styles are not applied. When we use the Web Developer toolbar to view the page, the dynamic elements do not appear. Pages render fine in Firefox, Chrome, and Safari.

Is IE7 unable to apply CSS styles to dynamically created elements? IE8 renders the dynamic elements properly.

This question applies to IE8 since we use the meta tag to force IE8 to render in IE7 mode.

Thanks!

Answer 1

We found the problem: instead of using setAttribute('class', 'cssClass') on a new element, we needed to use setAttribute('className', 'cssClass'), where 'cssClass' is some user defined CSS class.

While FF handles the 'class' attribute, IE chokes because 'class' is a special keyword in Javascript. Thus, you must use 'className' as the attribute name.

Thanks for everyone's responses!

Answer 2

I presume IE7 (ie IE8 loading as 7) is loading the CSS styles and only using those that apply to the document structure and load time. Maybe you can force reload of the stylesheet by including another tag in the dynamically loaded content.

Quick Q: Are you using the Strict DOCTYPE? They say something here about needing to use the Strict DOCTYPE with IE7 specifically. It's right under the Overview section.

Beware: If you didn't use Strict from the start, it's going to throw your layout out. But I would recommend using Strict anyway, as it makes your life easier in the long run. Just sort out your layout after switching and you're A for away .