[thelist] css not applying to elements created by JS in IE

[Christian Heilmann]

>var a=document.createElement('a');
>a.appendChild( document.createTextNode('(Remove) ') );
>a.setAttribute('title', 'Remove this preference from the list.');
>l.appendChild(a);
>
>l is an UL.
>
>Anyway, in IE, the text node is not styled like a link, even though it
>is a child node of an anchor. The hovering cursor is as if it were
>text, there is no underline and color styling that have been specified
>in CSS. This only happens in IE (only tested with IE/Win; possibly
>IE/Mac is also affected).
>
>  
>
IE needs the generated link to have an href to display it as a link

a.href="#" does the trick

>Another example:
>
>var interestList = document.getElementById('categoryInterestList');
>interestList.parentNode.setAttribute('style', 'background-color: gray;
>color: white;');
>
>Now, I had this in there just for testing (it will be a CSS class, if
>I can get it to work in IE). The background color and font color does
>not apply. Note that the color would actually be coloring text in a
>child of this styled element, so that's similar to the situation
>above. However, the background should show a direct effect and it
>shows none.
>  
>
You cannot set the attribute "style",   as that is also a variable of 
the element

interestList.parentNode.style.background='#ccc';
interestList.parentNode.style.background='#fff';

does the  trick there. However, it is much cleaner to use classes for that:

http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html

HTH
Chris