Layout Problem IE6

C

CyberbobAB

Mitglied
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. :mad:

Sorry das is der Header so ^^
 

Anhänge

  • layout.png
    layout.png
    1,8 KB · Aufrufe: 20
  • header.png
    header.png
    32,9 KB · Aufrufe: 15
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
 
So habe dein Tutorial schnell angepasst aber immer noch nicht richtig.
Der setzt unter die Headergrafik im IE einen leeren Bereich :confused:

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>
 

Anhänge

  • firefox.png
    firefox.png
    38,1 KB · Aufrufe: 10
  • ie.png
    ie.png
    34,3 KB · Aufrufe: 16
Nimm mal diese Regel im Stylesheet auf:

Code: 
div#header img {
		display: block;
		}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück