IE zerreist mein komplettes Layout

Status
Nicht offen für weitere Antworten.
noise

noise

Mitglied
Hallo Leute!

Ich habe zum ersten mal ein Layout mit CSS gestaltet und schon hab ich die gröbsten Probleme mit der Darstellung im IE! Ich hab einen shot vom FF & IE angehängt.

Gibts da - wenn ich euch das mal anschaut gleich etwas wo ihr sagt: ja klar - da musst du noch das und das machen damit das korrekt dargestellt wird?

Code: 
body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #000000;
	background-color: #FFFFFF;
	text-align: center;
	}
	
#container {
	background-color: blue;
	padding: 0px;
	margin: 1em auto;
	background: #FFFFFF;
	border: 1px solid #000000;
	text-align:left;
	width: 850px; 
	height: 568px;
}

#header {
	padding: 0px;
	height: 162px;
	width: 850px;
	background-color: red;
}

	#header_logo {
		height: 162px;
		width: 175px;
		background-color: blue;
		float: left;		
	}
	#header_banner {
		height: 77px;
		width: 675px;
		float: right;
	}
	#header_spacer_top {
		height: 11px;
		width: 675px;
		float: right;
	}
	#header_animation {
		height: 74px;
		width: 662px;
		float: right;
	}
	#header_spacer_left {
		height: 74px;
		width: 13px;
		float: left;
	}
	
#navi_container {
	height: 406px;
	width: 175px;
	background-color: green;
	float: left;	
}

	#navi_choice {
		height: 183px;
		width: 113px;
		background-color: red;
		float: left;
	}

	#navi_animation {
		height: 183px;
		width: 34px;
		background-color: purple;
		float: left;
		
	}	

	#navi_border {
		height: 183px;
		width: 28px;
		background-color: black;
		float: right;
	}

	#navi_bottom {
		height: 223px;
		width: 175px;
		float: bottom;
	}

#content {
	padding: 0px;	
	background-color: yellow;
	width: 675px;
	height: 406px;
	overflow:auto;
	float: right;
	background-image:url(images/Content_main.jpg);
}
 
Hi,

um den Content-Bereich korrekt anzuordnen, könntest du mal folgendes versuchen. Ergänze dein
CSS um folgende Passage, die nur vom IE interpretiert wird - hinter den Selektor #content setzen.
Code: 
* html #content{ margin-right: -2px;
                 width: 675px;}
Die CSS-Eigenschaft float kennt keinen Wert bottom. Diese Zeile kannst du aus #navi_bottom
löschen.

Um mehr sagen zu können, werden sicherlich mehr Informationen benötigt - z.B. Quellcode,
oder noch besser - online stellen.

Ciao
Quaese
 
So - ich hab mir das ganze jetzt nochmal mir "colored boxes" angesehen - und ich hab im IE links wo die navi dann sein soll - einen weißen Spalt entdeckt! Nur ich weiß absolut nicht wie ich den dort wegbekommen könnte
 
Hi,

der IE hat häufig Probleme, wenn es sich um das Positionieren mit float handelt. So ist eine
Lücke von 3 Pixeln ein gängiges Problem (3-Pixel-Bug). Das Nachpositionieren um 2px nach rechts
und die Grössenanpassung beruhen auf Erfahrungswerte bzw. Ausprobieren.

Die weiterhin bestehenden Lücken entstehen im IE, wenn nach Bildern (IMG) eine Leerzeile eingegeben
wird. Diese wird offensichtlich als zusätzliches Leerzeichen interpretiert. Da dieses Zeichen ebenfalls
eine Höhe besitzt, entsteht der Abstand.
Umgehen kannst du dieses Problem, indem du die schliessenden DIV-Tags in die gleiche Zeile wie
die IMG-Tags schreibst.
HTML: 
<img src="bild.gif"></div>
Im Content-Container solltest du das Hintergrundbild vertikal wiederholen lassen. Ansonsten wird
nach 406 Pixeln nicht die Grafik, sondern der gelbe Hintergrund angezeigt.

Ich habe die erforderlichen Änderungen im angehängten Dokument vorgenommen. Bild- und Flashpfade
sind allerdings absolut und müssen von dir wieder geändert werden. Die CSS-Definitionen habe ich
ebenfalls in das Dokument aufgenommen.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück