✔ [DOM][CSS][Internet-Explorer] CSS-Definitionen werden ignoriert

X

x_lilu_x

Grünschnabel
Hallo zusammen,

ich hab mich bisher beim Webdesign immer auf reines bzw. mit PHP erzeugtes HTML verlassen und höchstens mal sehr simple Sachen mit JavaScript verwendet.

In der Hoffnung, das mit DOM alles besser wird und Browserinkompatiblitäten nicht mehr so gravierend sind, habe ich mich jetzt jedoch entschieden, mal etwas zu versuchen.

Ich habe eine JS-Klasse geschrieben, die mir mit den DOM-Methoden (createElement, appendChild etc.) GUI-Elemente erstellt, die man auch auf der Seite verschieben kann.

Bis jetzt habe ich auch alles hinbekommen was Probleme gemacht hat und bis auf das Event-Handling benutze ich nur DOM-Methoden.

Mein Problem ist nun, das beim, von mir heissgeliebten Internet-Explorer :suspekt:, zwar alle CSS-Stile greifen, die ich direkt über JS zuweise, aber alle Stile, die ich in einer externen Datei definiert habe, werden komplett ignoriert. Beim Firefox habe ich das Problem nicht ... da funktionier alles einwandfrei. Woran könnte das liegen?
 
Das kann man nicht sagen, wenn man nicht mehr Infos(Link,Code) hat.
Mir sind keine besonderen Probleme des IE in Hinsicht auf externe CSS bekannt.
 
Hallo Sven,

ich stell die Seite morgen mal online und poste den Link. Eine Frage mal vorab.

Der Quelltext der Seite besteht nur aus einem leeren Body-Bereich und der Doctype ist HTML 4.01 strict. Die gesamten Elemente werden nach dem Laden der Seite in den Body-Node eingehängt.

Kann es unter Umständen sein, das der IE die CSS-Stile nicht auf nachträglich eingefügte Elemente anwendet.
 
Nö, eigentlich nicht... bei mir hat er bisher die Formate auch bei nachträglich eingefügten Elementen übernommen.
Der Verweis auf die CSS-Datei, wird der auch erst nachträglich erzeugt?
 
Nein ... der Verweis auf die Datei ist schon im Quelltext gegeben.

Ich werds heute noch nicht schaffen, die Seite on zu stellen, deshalb poste ich mal den die Quelltexte.

Also die index.htm ist folgendermaßen aufgebaut:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TEST</title>
<link href="includes/styles/window.css" rel="stylesheet" type="text/css">
</head>

<body>
<script language="javascript" type="text/javascript" src="includes/js_files/window.js"></script>
</body>
</html>


Wie zu erkennen ist, wird die CSS-Datei im Head mit eingebunden, sie hat folgende Definitionen:

Code: 
.window { // Eigenschaften des FensterContainers
}
.hwindow { // Titelleiste des erstellten "Fensters"
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	margin: 0px;
	border: 1px outset;
	width: 150px;
}
.hwindow img { // Close-Button
	margin-top: 1px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 1px;
	float: left;
}
.hwindow p { // Fenstertitel
	margin-top: 1px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 20px;
}
.cwindow { // Content-Bereich des Fensters
	background-color: #EBEBEB;
	margin: 0px;
	overflow: auto;
	border-top: 1px outset;
	border-right: 1px outset;
	border-left: 1px outset;
}
.fwindow { // Fussleiste des Fensters
	margin: 0px;
	background-color: #CCCCCC;
	border: 1px outset;
}


Und zu guter Letzt die JS-Datei:
Code: 
function windows(name, posx, posy, width, height) {
	var dragable = 1;
	var scalable = 1;
	var with_closer = 1;
	var scrollbars  = 2; // 0 = off, 1 = on, 2 = auto
	
	var orgx = posx;
	var orgy = posy;
	var orgw = width;
	var orgh = height;
	
	var wexist = 0;
	var wisclicked = 0;
	
	var elements = new Array();
	
	this.setDragable = function(flag) {
		dragable = flag;
	}
	
	this.setScalable = function(flag) {
		scalable = flag
	}
	
	this.setCloser = function(flag) {
		with_closer = flag;
	}
	
	this.setScrollbars = function(flag) {
		scrollbars = flag;
	}
	
	this.create = function() {
		container = document.createElement("div");
		head      = document.createElement("div");
		title     = document.createElement("p");
		titletext = document.createTextNode(name);
		content   = document.createElement("div");
		foot      = document.createElement("div");
		
		if(with_closer) {
			closer = document.createElement("img");
			closer.setAttribute("src", "images/closer.gif");
			closer.setAttribute("id", "closer_"+name);
			closer.style.width = 14+"px";
			closer.style.height = 14+"px";
			head.appendChild(closer);
		}
		
		title.appendChild(titletext);
		head.appendChild(title);
		head.setAttribute("class", "hwindow");
		head.style.height = 18+"px";
		head.style.backgroundColor = "#000099";
		
		content.setAttribute("class", "cwindow");
		content.style.height = orgh-20-15+"px";
		
		foot.setAttribute("class", "fwindow");
		foot.style.height = 12+"px";
		
		if(document.addEventListener) {
			head.addEventListener('mousedown', this.initDrag, true);
			head.addEventListener('mousemove', this.doDrag, true);
			head.addEventListener('mouseup', this.stopDrag, true);
		}
		else {
			head.attachEvent('onmousedown', this.initDrag);
			head.attachEvent('onmousemove', this.doDrag);
			head.attachEvent('onmouseup', this.stopDrag);
			
		}
		
		container.appendChild(head);
		container.appendChild(content);
		container.appendChild(foot);
		
		container.setAttribute("class", "window");
		container.setAttribute("name", name);
		container.setAttribute("id", name);
		
		container.style.width    = orgw+"px";
		container.style.height   = orgh+"px";
		container.style.position = "absolute";
		container.style.left     = orgx+"px";
		container.style.top      = orgy+"px";
		container.style.overflow = "hidden";
		
		elements[0] = container;
		elements[1] = head;
		elements[2] = content;
		elements[3] = foot;
		
		document.getElementsByTagName("body")[0].appendChild(container);
		setElement(name, container);
		wexist = 1;
	}
	
	
	var mstartx = 0;
	var mstarty = 0;
	var movx = orgx;
	var movy = orgy;
	
	this.initDrag = function(ev) {
		if(!wisclicked) {
			if(!ev)
				var ev = window.event;
			elements[1].style.cursor = "move";
			wisclicked = 1;
			mstartx = ev.pageX ? ev.pageX : ev.clientX;
			mstarty = ev.pageY ? ev.pageY : ev.clientY;
			pushElement(name);
		}
	}
	
	this.doDrag = function(ev) {
		if(wisclicked) {
			if(!ev)
				var ev = window.event;
			mx = ev.pageX ? ev.pageX : ev.clientX;
			my = ev.pageY ? ev.pageY : ev.clientY;
			elements[0].style.left = movx+mx-mstartx+"px";
			elements[0].style.top = movy+my-mstarty+"px";
		}
	}
	
	this.stopDrag = function(ev) {
		if(!ev)
			var ev = window.event;
		mx = ev.pageX ? ev.pageX : ev.clientX;
		my = ev.pageY ? ev.pageY : ev.clientY;
		elements[1].style.cursor = "default";
		elements[2].focus();
		wisclicked = 0;
		movx = movx+mx-mstartx;
		movy = movy+my-mstarty;
		mstartx = 0;
		mstarty = 0;
	}
}

Index = new Array();

function setElement(name, el) {
	var i = Index.length;
	var tmp = new Array(name, el, i+1);
	
	Index[i] = tmp;
	el.style.zIndex = i+1;
}

function pushElement(name) {
	var i = Index.length;
	var count;
	
	for(var c=0; c<Index.length; c++) {
		if(Index[ c][0] == name)
			count = Index[ c][2];
	}
	for(var c=0; c<Index.length; c++) {
		if(Index[ c][0] == name) {
			Index[ c][1].style.zIndex = i+1;
			Index[ c][2] = i+1;
		}
		if(Index[ c][2] > count) {
			Index[ c][1].style.zIndex--;
			Index[ c][2]--;
		}
	}
}

function init() {
	test = new windows("Testfenster", 150, 150, 450, 450);
	test.create();
	test2 = new windows("Testfenster 2", 180, 180, 400, 400);
	test2.create();
	test3 = new windows("Testfenster 3", 200, 200, 400, 400);
	test3.create();
}

window.onLoad = init();


Wie zu sehen ist, werden teileweise Styles per JS festgelegt und der Rest per CSS. Der Firefox macht das wie gesagt alles problemlos aber der IE macht nur das, was ich per JS festlege.

Wenn der Quellcode vielleicht ´n bissl kompliziert und aufgebläht ist, bitte ich, das zu entschuldigen ... dass ist das erste eigene DIng, was ich mit JS mach. Ich hab leider ned allzuviel Plan davon und hab das meiste nur über meine PHP-Kenntnisse abgeleitet.
 
Der IE scheint Probleme mit der Zuweisung des Klassennamen zu haben.

Nehme sie so vor:
Code: 
head.className="hwindow";
content.className="cwindow";
foot.className="fwindow";
container.className="window";
...dann gehts besser.
 
Hey danke Sven,

des klappt super. Ich hatte noch ´n anderes Problem, was sich mit dem Tip gelöst hat.

Vielen Dank nochmal :D
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück