Search code examples
javascripthtmlcssinternet-explorer-7dhtml

DHTML, multiple CSS Classes, in IE7

In IE 7, my sample static HTML and CSS correctly result in a horizontal and spaced set of div tags:

JSFiddle, Sample #1

But as soon as IE7 is asked to the same thing, with javascript modifying the "class" of the elements, it completely loses horizontal formatting:

JSFiddle, Sample #2

This second example generates the HTML, and updates it with a timer, but it is identical HTML.

I speculate this has something to do with having more than one class associated with the div elements (class="count-digit digit4"), and the fact that I'm updating the second of those two classes dynamically. I figure IE7 just gives up. Is that the real issue? And regardless, what would be the proper way to fix this - so that dynamic updates work correctly?

Solution

  • Try using element.setAttribute("className", "your-classname-here"); "Class" is a reserved word in ECMAscript, so they had to go with "className" instead (I'm guessing).

    There's more info on SO here: why is class a reserved word in JavaScript?