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="imgconta iner" 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="imgconta iner" 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="imgconta iner" 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="imgconta iner" 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="imgconta iner" 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="imgconta iner" 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="imgconta iner" 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="imgconta iner" 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.set Attribute("clas s", "imgcontainer") ;

is fine for most browsers, but not ie.

To work in all browsers set the class as a property, not an attribute:
thumbnailLi.cla ssName="imgcont ainer";

[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.cla ssName="imgcont ainer";

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.addEventLis tener(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