CSS und InternetExplorer

[Lightstorm]

Folgende CSS Code wird von den neusten Versionen des Firefox, Google Chrome, Opera und Safari so angezeigt wie man es vom CSS Code auch erwarten würde, korrekt.

Warum zum Teufel tanzt aber der InternetExplorer 7 aus der Reihe und erzeugt Fehldarstellungen, ich habs jetzt etwas geändert und es ist bisschen besser geworden.
Endweder ich erzeuge ein völlig falschen CSS oder IE hat sehr seltsame CSS Anforderungen *seufz*

Es ist in 90% der Fälle immer so das meine CSS Sachen in IE nicht richtig angezeigt werden. Oft habe ich das Gefühl das der IE gar nicht auf die gesetzen Abstandswerte reagiert sondern irgendwie eigene Regeln befolgt.

Was mache ich falsch?

body {
	//background-color: #eeeeee;
	background-image: url(746.png);
	
}


#header {
	width: 1005px;
	height: 225px;
	margin: 5px 0 0 5px;
	background-image:url("header.png");
	background-repeat: no-repeat;
}


#login {
	width: 187px;
	height: 90px;
	margin: 5px 0 0 5px;
	border:1px solid  #000000;
	background-color: #f8f8ff;
	position: absolute;
}


#login_header {
	width: 187px;
	height: 26px;
	margin: 0px 0 0 0px;
	background-image:url("login.png");
	background-repeat: no-repeat;
}


#login_kern {
	width: 170px;
	height: 40px;
	margin: 8px 0 0 8px;
	border:1px solid  #000000;
	background-color: #f8f8ff;
	
}



#content {
	width: 802px;
	height: 350px;
	margin: 5px 0 0 206px;
	border:1px solid  #000000;
	background-color: #f8f8ff;
	position: absolute;
}

#content_header {
	width: 802px;
	height: 26px;
	margin: 0px 0 0 0px;
	background-image:url("content_header.png");
	background-repeat: no-repeat;
}

#content_kern {
	width: 790px;
	height: 30px;
	margin: 6px 0 0 6px;
	border:1px solid  #000000 
}

#menu {
	width: 187px;
	height: 70px;
	margin: 115px 0 0 5px;
	border:1px solid  #000000;
	background-color: #f8f8ff;
	position: absolute;
}


#menu_header {
	width: 187px;
	height: 26px;
	margin: 0px 0 0 0px;
	background-image:url("login.png");
	background-repeat: no-repeat;
}


#menu_kern {
	width: 180px;
	height: 30px;
	margin: 2px 0 0 2px;
	border:1px solid  #000000
}



#impressum {
	width: 1005px;
	height: 55px;
	margin: 380px 0 0 5px;
	background-image:url("impressum.png");
	background-repeat: no-repeat;
}

 

[anna55]

Eigentlich sieht Dein CSS auf den ersten Blick nicht ungewöhnlich aus. Nimm die Anführungszeichen aus den URL-Angaben raus.
SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder

Ansonsten: Cascading Style Sheets : Artikel : Internet Explorer 7

Man müsste mal draufsehen, um was sagen zu können.

Edit: Du setzt richtige Doctypes ein?

Die zwei Slash müssen raus aus dem CSS.

[COLOR="red"]//[/COLOR]background-color: #eeeeee;

SELFHTML: Stylesheets / CSS-Formate definieren / Stylesheets in HTML einbinden

 

[ein schlauer]

Die zwei Slash müssen raus aus dem CSS.

Was Lighstorm eigentlich auch sehen hätte müssen, da Firefox, auch in der neusten Version, CSS Fehler in der Fehlerkonsole anzeigt.

EDIT: und was auch hilfreich ist, wenn der HTML Code mal mit dem Validator geprüft wird

 

[Lightstorm]

Habe die HTML Datei jetzt in HTML 4.01 Strict validiert, 0 Fehler und 0 Warnungen.

Auch das CSS (CSS level 2.1) wird Fehlerlos validiert. Die Slash hab ich jetzt entfernt, war ein Versehen.

Ich hab die Divs mal ohne Grafiken hochgeladen:
Die Webseite

In IE 7 ist der gesamte Bereich unterhalb des Headers einige Pixel nach rechts verschoben.
In Firefox, Google Chrome, Opera u. Safari dagegen ist es wie es sein sollte.

 

[kkapsner]

Positioniere alle absolut und dann sollte es auch passen.

 

[Lightstorm]

Ja es klappt wenn ich alle Divs auf position absolute setze. Danke!