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!