Jump to content

ie doesn't recognize the "class" attribute?


Guest mathfeel

Recommended Posts

Guest mathfeel

I have the following code:

...var div_thmbnl_cont = [];var div_thmbnlimg = [];var a_thmbnl = [];var img_thmbnl = [];var div_thmbnldscp = [];var txt_dscp = [];var thumbnailcontainer_style = { width : 190, height : 310, border_size : 3, left_gap : 50, left_zero : 20, top_gap : 30, top_zero : 30 };var col_num = 4;function thumbnail_dom(){  var cnt = 0;  var div_thmbnls = document.getElementById("Thumbnails");  for (var i = 0; i < artarr.length; i++){    //<div class="thumbnailcontainer">    // <div class="thumbnailimage"><a href="IMG_2770.JPG"><img class="thumbnail" src="IMG_2770.JPG" /></a></div>    // <div class="thumbnaildscp">Lake Tahoe 小溪</div>    //</div>    div_thmbnl_cont[cnt] = document.createElement("div");    div_thmbnl_cont[cnt].setAttribute("class","thumbnailcontainer");    // DEBUG:  window.alert(stylestr);        // div_thmbnl_cont[cnt].style.position = "absolute";    div_thmbnl_cont[cnt].style.left = (Math.floor((cnt%col_num)*(thumbnailcontainer_style.width+thumbnailcontainer_style.left_gap))+thumbnailcontainer_style.left_zero) +"px";    div_thmbnl_cont[cnt].style.top =  (Math.floor(cnt/col_num)*(thumbnailcontainer_style.height+thumbnailcontainer_style.top_gap)+thumbnailcontainer_style.top_zero) +"px";    /* thumbnail image */    div_thmbnlimg[cnt] = document.createElement("div");    div_thmbnlimg[cnt].setAttribute("class","thumbnailimage");    a_thmbnl[cnt] = document.createElement("a");    a_thmbnl[cnt].setAttribute("href",artarr[i].filename);    img_thmbnl[cnt] = document.createElement("img");    img_thmbnl[cnt].setAttribute("class","thumbnail");    img_thmbnl[cnt].setAttribute("src","thumbnails/"+artarr[i].filename);    img_thmbnl[cnt].style.width = '100%';        a_thmbnl[cnt].appendChild(img_thmbnl[cnt]);    div_thmbnlimg[cnt].appendChild(a_thmbnl[cnt]);    /* Description */    div_thmbnldscp[cnt] = document.createElement("div");    div_thmbnldscp[cnt].setAttribute("class","thumbnaildscp");    txt_dscp[cnt] = document.createTextNode(artarr[i].title + " (" + artarr[i].size + ")");    /* Put together */    div_thmbnldscp[cnt].appendChild(txt_dscp[cnt]);    div_thmbnl_cont[cnt].appendChild(div_thmbnlimg[cnt]);    div_thmbnl_cont[cnt].appendChild(div_thmbnldscp[cnt]);        div_thmbnls.appendChild(div_thmbnl_cont[cnt]);    cnt = cnt + 1;  }    div_thmbnls.style.width = (col_num*(thumbnailcontainer_style.width+thumbnailcontainer_style.left_gap)+thumbnailcontainer_style.left_zero)+"px";  div_thmbnls.style.height = (Math.ceil(cnt/col_num)*(thumbnailcontainer_style.height+thumbnailcontainer_style.top_gap)+thumbnailcontainer_style.top_zero)+"px";}

which basically read a object array (artarr) and then dispay the corresponding thumbnail.This piece runs perfectly in Firefox, but in IE it looks terrible because it wouldn't format according to the CSS file (the reason I am setting bunch of 'class' attributes).It's not like IE can't link the CSS file either, because any style I applied to <BODY> seems to work perfectly well...What's going on?

Link to comment
Share on other sites

Maybe this will give you better performance in IE.Does not use "setAttribute()", set the className instead.

  <script type="text/javascript">    function mkDiv(){  var iDiv = document.getElementById('insert_here');  var str = "This is a test, does it work?";    nwDiv = document.createElement('DIV');  nwDiv.className = "highlight";  textNode = document.createTextNode(str)  nwDiv.appendChild(textNode);    iDiv.appendChild(nwDiv);  }    window.onload = mkDiv;  </script>  </head>  <body>  <div id="insert_here">  </div>

Thanks,

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...