node.innerHTML und css

[Noerknhar]

hi ihr lieben.

hoffe, dass ich in diesem forum richtig bin...bin neu hier

es geht um folgendes:
ich proigrammiere seit knapp einer woche an einem etwas umfangreicheren projekt. das ganze ist wie folgt aufgebaut:
index.html, enthält css, javascript und html und ruft per AJAX eine php-datei auf, welche ein xml-ausgabeformat an javascript schickt. so weit, so gut. das ist auch alles nicht ads problem.

in der index.html habe ich oben im header über <link rel='stylesheet' type='text/css' href='xmenu5.css'> ein css importiert. zugegebenermaßen ist dies geklaut, ist aber GPL

folgende problematik: wenn ich jetzt mit node.innerHTML+=""; html-source in eine tabelle (bzw ein div innerhalb einer tabelle) einfüge, wird eben das eingefügte nicht vom css erkannt!
EIN GRAUS!

hat jemand ein workaround? abhilfe? irgendwas?
auf anfrage kann ich codefragmente hierher stellen


hoffe, mir kann geholfen werden.
mfg, H.

[pit-r]

Moin!

auf anfrage kann ich codefragmente hierher stellen

Anfrage!

Ahoi - Pit

[Noerknhar]

Moin!Anfrage!

Ahoi - Pit

alles klar

es hat sich allerdings schon quasi erledigt...ich bin trotzdem immernoch stark interessiert, warum dem so ist.

okay, ich versuche es mal so allgemein wie möglich zu halten

folgendes habe ich in meinem html-dokument:

<table border="0" name="tabelle">
  	<tr>
  		<td>
    			<div id="map" style="width: 800px; height: 600px"></div>
                 </td>
    		<td>
    			<div id="tree">
    			
    			</div>                         
            </td>
    	</tr>

es ging um den zugriff auf das div mit der id "tree".

der zugriff wurde über

document.getElementById("tree").innerHTML+="";

gestaltet.

das problem war, dass ich in dieses div mit der id "tree" ein weiteres div eingefügt habe:

<div id='clpsUL1Container'>
<ul id='clpsUL1' class='xMenu'>

die css sieht wie folgt aus:

/* xCollapsible/xMenu5 Demo */

/* Common */

.xMenu {
  margin:0; padding:0;
}

#xm5 li a {
  text-align:right;
  font-size:x-small;
}
.xMenu li a, .xMenu li a:link, .xMenu li a:visited, .xMenu li a:active {
  background:transparent;
  display:block;
  text-decoration:none;
  margin:0; padding:2px 0 2px 0;
  border-bottom:1px solid #ccc;
}
#clpsUL1 li a:hover {
  background:#FFF6F0;
  display:block;
  border-bottom:1px solid #CFD4E6;
  text-decoration:none;
  margin:0; padding:2px 0 2px 0;
}
#xm5 li a:hover {
  background:#eef;
  display:block;
  border-bottom:1px solid #BF8660;
  text-decoration:none;
  margin:0; padding:2px 0 2px 0;
  text-align:right;
}

/* xCollapsible */

#clpsUL1 ul {
  margin:0; padding:0;
  border-left:1px solid #CFD4E6;
  background:#eef;
  cursor:pointer;
}
#clpsUL1 li {
  margin:0px 0 0px 0;
  padding:2px 10px 2px 10px;
  list-style-type:none;
/*  list-style-position:outside;*/
  font-size:x-small;
}
#clpsUL1 span { /* label */
  display:block;
  font-weight:bold;
  padding:2px;
  background:#CFD4E6;
  cursor:pointer;
}

/* xMenu5 */

#xm5 ul {
  position:relative;
  margin:0; padding:0;
  border-right:1px solid #BF8660;
  background:#FFF6F0;
  cursor:pointer;
}
#xm5 li {
  position:relative;
  margin:0px 0 0px 0;
  padding:1px 10px 1px 10px;
  list-style-type:none;
}
.xMenuLbl {
  font-weight:bold;
  margin:0px; padding:2px;
  background:#BF8660;
  cursor:default;
  text-align:right;
  font-size:x-small;
}
.xMenuBtn {
  position:absolute;
  left:0px; top:1px;
  margin:0; padding:2px;
  font-weight:bold;
  background:#BF8660;
  cursor:pointer;
  width:1em;
  font-size:x-small;
}

/* Layout rules for the demo */
#clpsUL1Container {
  position:absolute;
  top:1px;
  overflow:visible;
  margin:0; padding:0;
  width:240px;
}
.btn {
  cursor:pointer;
  border-bottom:1px dotted #BF8660;
}

was davon jetzt genau relevant ist, weiß ich nicht. das problem war, dass ich, wenn ich die sachen so per innerHTML eingefügt habe, eben dieses div mit der id "clpsUL1Container" nicht bearbeitet wurde. klingt komisch, ist aber leider so

workaround sieht wie folgt aus:

<table border="0" name="tabelle">
  	<tr>
  		<td>
    			<div id="map" style="width: 800px; height: 600px"></div>
                 </td>
    		<td>
    			<div id="tree">
    			<div id='clpsUL1Container'>
				<ul id='clpsUL1' class='xMenu'> 
  				
				</ul> <!-- end clpsUL1 -->
				</div> <!-- end clpsUL1Container -->
    			</div>                         
            </td>
    	</tr>

sowie

document.getElementById("clpsUL1").innerHTML+="";

ich hoffe, das ist jetzt nicht zu lang...und ich hoffe, dass mir jemand sagen kann, warum genau das nicht so funzt, wie ich es zunächst probiert habe