Today I was fixing a problem on a site in which some background images weren’t showing up on certain elements in Internet Explorer but they were showing up under Firefox and Chrome.
The page is quite a complex one which does a lot of client-side building of DOM elements so I started digging around in there, finding the section which was creating the element.
The code was very simple, all it did was create a
<span /> tag, assign some CSS classes to it and eventually add it to the DOM. Nothing overly complex about it but it was breaking none-the-less.
So I fired up the (lovely…) IE7 (yes, I’m on a SOE with IE7) and inspected the DOM. Sure enough the element was in the DOM, but when I looked at the applied styles in the inspector I noticed that the styles from the CSS class did not exist. According to the DOM inspector the CSS class was applied, just none of the rules were. I started to be confused, I tried manipulating the stylesheet, adding some more sizing to the element, but nothing caused the rules to be applied. But if I started playing in the DOM inspector I could influence it but only with what I was custom adding.
After scratching my head for a while I took another look at the element creation process, and then I noticed something very strange…
setAttribute method on the DOM element to set the CSS class, not the
className property. I’ve never done it via the method, so I changed it to use the property and vola the CSS class was applied!
I then created a very simple little piece of HTML to test with to ensure it wasn’t something more of a problem from the overall page, but it always fails in IE, here’s my sample code:
Save that as a HTML file and open it in IE7, IE9 Beta (I don’t have 8 or 6 on a machine), Firefox 3.6.11 and Chrome 8. In both the IEs I tested the background colour & padding is not applied, despite the inspector saying that the element has the classes applied to it.
I’ll be reporting this as a bug in IE shortly, but of future note to developers use
elemnet.setAttribute for CSS class assignment!