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

[Matt Warden]

thelist,

I am not 100% sure I've diagnosed the problem, but it seems like
certain styling will not apply to elements that are added to the DOM
by Javascript, in IE. For example:

// create remove link
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).

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.

However, strangely, this works fine in IE:

for (var j=0; j<childdivs.length; j++)
{
	if (childdivs[j] != selectedDiv)
	{
		childdivs[j].className = unselectedClassName;
	} // end if
}// end for

where unselectedClassName='unsel_cat'.


You can see the interface here: http://a2ew.com/

If you check an interest, you'll see it show up in the right gray box,
and that will have the remove link. If you select a main category to
the left, you'll see how the category you selected becomes
'highlighted' in a way, and the others get the normal white background
(unselectedClassName).

Any ideas?


-- 
Matt Warden
Miami University
Oxford, OH, USA
http://mattwarden.com


This email proudly and graciously contributes to entropy.