DOM methods showing different results in IE

Hi...

I'm "ajaxifying" my image gallery and I have some code which creates the elements on the fly and places them on the page.

Using firefox, the code works fine and the elements show up as they should, however in IE, the UL and LI's appear to have no style associated with them at all and don't display as they should.

They are styled with CSS and it's the same layout as the non ajax version, which works fine in IE.

The way the html should look after javascript:

[HTML]<h1>Photo album: France, July 2006</h1>
<span id="page_count">Page 1 of 5</span>
<ul id="gallery">

<li class="imgcontainer" title="Yaron and yup, that's the Catheral Notre Dame de Paris... again.">
<div>
<a href="/simpleTEST/www/?pid=2&amp;a=44&amp;im=1">
<img src="data/thumbs/album_44_image_306.jpg" alt="" width="80" height="60" />

</a>
</div>
</li>

<li class="imgcontainer" title="">
<div>
<a href="/simpleTEST/www/?pid=2&amp;a=44&amp;im=2">
<img src="data/thumbs/album_44_image_307.jpg" alt="" width="80" height="60" />
</a>
</div>

</li>

<li class="imgcontainer" title="">
<div>
<a href="/simpleTEST/www/?pid=2&amp;a=44&amp;im=3">
<img src="data/thumbs/album_44_image_308.jpg" alt="" width="60" height="80" />
</a>
</div>
</li>

<li class="imgcontainer" title="">

<div>
<a href="/simpleTEST/www/?pid=2&amp;a=44&amp;im=4">
<img src="data/thumbs/album_44_image_309.jpg" alt="" width="60" height="80" />
</a>
</div>
</li>

<li class="imgcontainer" title="">
<div>
<a href="/simpleTEST/www/?pid=2&amp;a=44&amp;im=5">

<img src="data/thumbs/album_44_image_310.jpg" alt="" width="80" height="60" />
</a>
</div>
</li>

<li class="imgcontainer" title="">
<div>
<a href="/simpleTEST/www/?pid=2&amp;a=44&amp;im=6">
<img src="data/thumbs/album_44_image_311.jpg" alt="" width="60" height="80" />
</a>

</div>
</li>

<li class="imgcontainer" title="Yaron wanted all these pics... seriously.">
<div>
<a href="/simpleTEST/www/?pid=2&amp;a=44&amp;im=7">
<img src="data/thumbs/album_44_image_312.jpg" alt="" width="60" height="80" />
</a>
</div>
</li>


<li class="imgcontainer" title="">
<div>
<a href="/simpleTEST/www/?pid=2&amp;a=44&amp;im=8">
<img src="data/thumbs/album_44_image_313.jpg" alt="" width="80" height="60" />
</a>
</div>
</li>

</ul>
<p id="img_desc">

I have a couple of great friends... Mike and Yaron drove over to France with me to help shift my stuff when I moved here.
</p>[/HTML]

The javascript which creates this html:


As you can see, I'm using DOM methods to create and add the elements to my HTML. Both IE6 and 7 appear to show the unordered list containing the thumbs with no style. The rest of the elements are styled as they should be.

Any ideas appreciated.

Thanks

re: DOM methods showing different results in IE

your line
is fine for most browsers, but not ie.

To work in all browsers set the class as a property, not an attribute:
thumbnailLi.className="imgcontainer";

re: DOM methods showing different results in IE

Wow that's nuts, but it works! Thanks... I suppose this is only for classes, seeing as how the other elements using "id" work fine?

Excellent... oh, one more question.

I wrote a small simple tooltip class and I assign an event to <a> tags on the page. I use the standards method of obj.addEventListener(event, func, false); and obj.attachEvent('on'+event, func); for W3C browsers and IE, respectively - however, the event only passes the object to the function call in good browsers. In IE, the function that's called has no access to the object. Instead, I have to use the .onmouseover = funcName;

Any idea why?

Thanks

re: DOM methods showing different results in IE

Ok, I figured I'd just post an answer to my second question:

from http://www.quirksmode.org/js/events_advanced.html

Sigh