Layout Problem IE6

CyberbobAB · 11. November 2008

Hi,
ich bin am verzweifeln ich möchte ein CSS Layout erstellen.
Es soll ao aussehen wie auf der Skizze (siehe Anhang).
In dem Header des Layouts ist eine grafik (siehe Anhang)die rechts und links unten so graue Kästen hat.
Diese Kästen sollen nahtlos mit der Hintergrundfarbe vom rechten und linken DIV übereinstimmen.

So jetzt zum eigentlichen Problem:

Im Firefox bekomme ich das Layout hin aber im IE(z.B. IE6) nicht.
z.B. der DIV für den Header hat genau die größe von der Grafik. Aber der IE Haut da ne Zeile rein.
Oder da mal ein zwei pixel mehr als im css angegeben.

Ich habe schon ordentlich gegoogelt und fertige css layouts angepasst mit IEHACK aber es läuft nicht so wie ich es haben will.

Sorry das is der Header so ^^

Maik · 11. November 2008

Hi,

da empfehle ich dir doch einfach mein CSS-Tutorial CSS-Layout mit 100%-Höhe, dessen vier enthaltenden Modellvarianten im IE6 keine Layout-Probleme bereiten.

Deine Screenshots sind ja ganz nett anzuschauen, nur lässt sich aus ihnen die Ursache für das Layout-Problem nicht ablesen.

mfg Maik

CyberbobAB · 11. November 2008

So habe dein Tutorial schnell angepasst aber immer noch nicht richtig.
Der setzt unter die Headergrafik im IE einen leeren Bereich

HTML:

<html>
	<head>
		<title>TEST123</title>
		<style type="text/css">
		<!--
			* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
		margin: 0;
		padding: 0;
		font: bold 1em verdana, sans-serif;
		}

		body {
		text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
		}

		div {
		text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
		}

		html, body {
		height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
		}

		/* DIV-Boxen */

		div#wrapper {
		position: relative;
		margin: 0 auto;
		width: 800px;
		min-height: 100%; /* Mindesthöhe in modernen Browsern */
		height: auto !important; /* !important-Regel für moderne Browser */
		height: 100%; /* Mindesthöhe in IE (<7) */
		border: 1px solid red;
		}

		div#header {
		height: 200px;
		}

		div#leftCol {
		background-color:#4D4D4D;
		width: 157px;
		height: 200px;
		float: left;
		}

		div#rightCol {
		background-color:#4D4D4D;
		width: 157px;
		height: 200px;
		float: right;
		}

		div#centerCol {
		margin: 0 px;
		border: 1px solid red;
		height: 200px;
		}

		div#footer {
		clear: both;
		position: absolute;
		bottom: 0;
		width: 800px;
		height: 20px;
		border-top: 1px solid #b8b8b8;
		border: 1px solid red;
		}


		/* clearfix zum Aufheben der Floatumgebung */

		.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
		}

		.clearfix {display: inline-block;}

		/* Hides from IE-mac \*/
		* html .clearfix {height: 1%;}
		.clearfix {display: block;}
		/* End hide from IE-mac */
		-->
		</style>
	</head>
	<body>
		<div id="wrapper" class="clearfix">
			<div id="header"> <img src="header.png" /> </div>
			<div id="leftCol">leftCol</div>
			<div id="rightCol">rightCol</div>
			<div id="centerCol">centerCol</div>
			<div id="footer">footer</div>
		</div>
	</body>
</html>

Maik · 11. November 2008

Nimm mal diese Regel im Stylesheet auf:

Code:

div#header img {
		display: block;
		}

mfg Maik

Layout Problem IE6

CyberbobAB

Mitglied

Anhänge

Maik

CyberbobAB

Mitglied

Anhänge

Maik

Neue Beiträge