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

[Christian Heilmann]

Christian Heilmann wrote:

>
>> 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';
>
Err that  should be
interestList.parentNode.style.color='#fff';

of course

> does the  trick there. However, it is much cleaner to use classes for 
> that:
>
> http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html 
>
>
> HTH
> Chris
>
>
>
>
>
>
>