Christian Schäfer: IE ignoriert CSS von via JavaScript generierten Tabellen

Beitrag lesen

hallo!

ich habe folgendes problem, vielleicht kann mir ja hier jemand weiterhelfen..

ich erzeuge via javascript zur ladezeit verschiedene tabellen.
die formatierung derselben soll per css clases erfolgen.

im mozilla sieht alles ganz prima aus. der ie (5.5) allerdings ignoriert die css class scheinbar.

das skript erzeugt folgenden code:

----------------------------------------------------------------
<TABLE id=t_cont class="cont">
<TBODY>
<TR>
<TD>text</TD></TR></TBODY></TABLE>
----------------------------------------------------------------

so von hand geschrieben sieht er in mozilla, wie auch im ie einwandfrei aus. wird dieser code allerdings zur ladezeit von javascript generiert, ignoriert der ie die css klasse..

witzigerweise funktioniert aber auch eine kombination von beidem. also den manuellen code erst und denselben nochmal via javascript generieren zeigt plötzlich alles richtig an.

meine vermutung daher: kann es sein, dass der ie css klassen nur einliest, wenn er sie auch im empfangenen html benötigt sieht und somit 'neuverwendete' klassen nicht erkennt?

und wenn ja oder nein: wie kann ich das am schlauesten beheben?

gruss+dank!
/christian

hier die dateien:

---index.html---------------------------------------------------
<html><head><title>titel</title></head>
<script language=JavaScript type=text/javascript src=fl.js><!-- //--></script>
<frameset rows='100' border=0>
 <frame name=main src=main2.html frameborder=0 noresize scrolling=no>
</frameset>
</html>
----------------------------------------------------------------

---main2.html---------------------------------------------------
<html>
<style type="text/css"><!-- @import "fl2.css"; //--></style>
<script>D=(top.init)?function(m){top.P(window,m)}:function(){};if(window==top){top.location='/index.html';}</script>
<body><center id=site>
</center></body>
<script language=JavaScript type=text/javascript><!--
D(["append_table","site","t_cont","cont"]);
D(["append_row","t_cont",[0,[[1,"text",0]]]]);
//--></script>
<hr><textarea cols=80 rows=16 id=source></textarea>
<script language=JavaScript type=text/javascript><!--
document.getElementById("source").value = document.getElementById("site").innerHTML;
//--></script>
</html>
----------------------------------------------------------------

---fl.js--------------------------------------------------------
<!--
var init=true;

function P(w,m){
 m[1] = w.document.getElementById(m[1]);
 eval(m[0])(w,m.slice(1,m.length));
}

function append_table(w,d)
{
 /* w:  current context's window
  * d[0]: obj to append to
  * d[1]: id of appended table
  * d[2]: class of appended table
  * d[3+]: list of attributes of appended table
  */

t = d[0].appendChild(w.document.createElement("table"));
 t.setAttribute("id",d[1]);
 t.setAttribute("class",d[2]);

for(i=3;i<d.length;++i) // runs through attributes to append to table
 {
  switch(d[i]){
   case "claxss": t.className = d[i][1]; break;
   default:  t.setAttribute(d[i][0],d[i][1]);
  }
 }
}

function append_row(w,d)
{
 /* w:  current context's window
  * d[0]: table object where to append to
  * d[1+]: list of arrays with cells, theis attributes and their content
  */

tr = d[0].insertRow(d[0].rows.length);
 for(i=1;i<d.length;++i)  // runs through cells to append to row
 {
  td = tr.insertCell(tr.cells.length);

for(j=0;j<d[i][0].length;++j) // runs through attributes to append to cell
  {
   switch(d[i][0][j][0]){
    case "clxass": td.className = d[i][0][j][1]; break;
    default:  td.setAttribute(d[i][0][j][0],d[i][0][j][1]);
   }
  }

for(j=0;j<d[i][1].length;++j) // runs through elements to append to cell
  {
   append_element(w,[td].concat(d[i][1][j]));
  }
 }
}

function append_element(w,d)
{
 /* w:  current context's window
  * d[0]: object where to append to
  * d[1]: type of element
  * d[2]: value of element
  * d[3+][]: list of arrays with attributes ([0]=key,[1]=value)
  */
alert(d[1]);

switch(d[1]){
  case 0: /* void    */
   break;
  case 1: /* text    */
   d[0].appendChild(w.document.createTextNode(d[2]));
   break;
  case 2: /* element */
   n = d[0].appendChild(w.document.createElement(d[2]));

for(k=3;k<d.length;++k)
   {
    switch(d[k][0]){
     case "class": n.className = d[k][1]; break;
     default:  n.setAttribute(d[k][0],d[k][1]);
    }
   }
   break;
 }

}
//-->
----------------------------------------------------------------

---fl.css-------------------------------------------------------
BODY
{
 margin-top:   0px;
 margin-bottom:  0px;
 margin-left:  0px;
 margin-right:  0px;
 background-color: #FF5400;
 font-family:  Tahoma,Verdana,Helvetica,sans-serif;
 font-size:   10pt;
 color:    #FFFFFF;
}

.cont
{
 width:    778px;
 height:    100%;
 border-width:  1px;
 border-style:  solid;
 border-color:  red;
 background-color: #000000;
}
----------------------------------------------------------------