5

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!

  • 4
    Please show some code. One common reason for this is faulty HTML – Pekka Sep 6 '10 at 18:10
  • Thanks, Pekka. Sure, if you visit our client's site @ tekiki.com, you can see what I mean. – Crashalot Sep 6 '10 at 18:37
  • We added browser/feature detection to the site. Please click here to access the site from IE7 or IE8: tekiki.com/?so=1. If not, you'll get redirected to a page explaining the lack of support for IE. From the home page, enter two keywords and click "Brainstorm." The rendering issues will then appear. Specifically, view the items under the "Translations" box (right column). Each line should contain a translation and language label, but IE7 mashes the two span elements together. – Crashalot Sep 6 '10 at 19:17
  • 3
    Sorry for going offtopic but I love the panda bear. :D – Octavian A. Damiean Sep 6 '10 at 19:45
11

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!

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.