DOM methods showing different results in IE

[steven]

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:

      if (galleryObj) {
        clearInterval(timer);
 
        galleryTitle = dom.newElement(d, "h1");
        galleryTitle.appendChild(dom.addText(d, "Photo album: " + galleryObj.gallery.title));
 
        galleryPage  = dom.newElement(d, "span");
        galleryPage.setAttribute("id", "page_count");
 
        thumbnailUl  = dom.newElement(d, "ul");
        thumbnailUl.setAttribute("id", "gallery");
 
        galleryDesc  = dom.newElement(d, "p");
        galleryDesc.setAttribute("id", "img_desc");
        galleryDesc.appendChild(dom.addText(d, galleryObj.gallery.desc));
 
        for (var i = 0; i < galleryObj.gallery.thumbs_per_page; i++) {
          if (image = galleryObj.gallery.image[i]) {
            thumbnailLi  = dom.newElement(d, "li");
            thumbnailLi.setAttribute("class", "imgcontainer");
            thumbnailDiv = dom.newElement(d, "div");
            thumbnailA   = dom.newElement(d, "a");
            thumbnailImg = dom.newElement(d, "img");
            thumbnailA.setAttribute("href", "javascript: simple.enlarge(" + image.img_id + ")");
            thumbnailImg.setAttribute("src", image.thumb);
            thumbnailImg.setAttribute("alt", image.desc);
            // append elements
            thumbnailA.appendChild(thumbnailImg);
            thumbnailDiv.appendChild(thumbnailA);
            thumbnailLi.appendChild(thumbnailDiv);
            thumbnailUl.appendChild(thumbnailLi);
          }
        }
 
        // display after a delay
        setTimeout(function() {
          d.getElementById('content').appendChild(galleryTitle);
          d.getElementById('content').appendChild(galleryPage);
          d.getElementById('content').appendChild(thumbnailUl);
          d.getElementById('content').appendChild(galleryDesc);
          // after work is done, hide loadingAnim and show thumbs
          loadingAnim.style.display = "none";
        }, 1000);
     }

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

[mrhoo]

your line

thumbnailLi.setAttribute("class", "imgcontainer");

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";

[steven]

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";

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

[steven]

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

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

When compared to the W3C model, the Microsoft model has two important drawbacks:

1. Events always bubble, no capturing possibility.
2. The event handling function is referenced, not copied, so the this keyword always refers to the window and is completely useless.

Sigh