✔ Center mit CSS und IE

RageNo1

RageNo1

Erfahrenes Mitglied
Hallo,
ich bastel hier gerade an einem Layout und bekomm das kot*** mit dem IE7 (denke im IE6 ist es auch der Fall).
Ich möchte einen Block zentriert dargestellt haben. Der FF macht das Problemlos mit. Im IE wird allerdings nichts zentriert dargestellt.

Hier mal der HTML Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>title...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>

<div id="header">
	<div id="top">
		<div id="titel"><img src="grafik/logo.jpg"></div>

		<div id="login">loginform</div>
	</div>
</div>

<div id="mitte">
	<div id="navi">navi</div>
	<div id="content">
	start content
	</div>
</div>

<div id="footer">footer</div>

</body>
</html>

Hier nun der CSS Teil:
Code: 
body {
	background-image: url(grafik/bg.gif);
	margin: 0px;
}

#header {
	height: 140px;
	background-color: #FFFFFF;
	border-bottom: 15px solid #940000;
	margin-bottom: 10px;
}

#top {
	width: 700px;
	margin: auto;
}

#titel {
	float: left;
	margin-top: 26px;
}

#login {
	float: right;
}

#mitte {
	width: 700px;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	height: 200px;
	margin: auto;
}

#footer {
	background-color: #FFFFFF;
	border-top: 5px solid #940000;
	width: 700px;
	height: 80px;
	margin: auto;
}
 
Hi,

dir stehen hier zwei Lösungsmöglichkeiten zur Auswahl:

  • Einen anderen Doctype wählen, damit das HTML-Dokument den Browsern im standardkonformen Modus übergeben wird, denn im Darstellungsmodi "Standardsmode" hält sich der IE an das Boxmodell, und interpretiert die margin:auto-Deklarationen korrekt, also z.B.:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
  • Den Doctype belassen, womit die Browser im Darstellungsmodi "Quirksmode" laufen, und das Stylesheet entsprechend erweitern:
Code: 
body {
        background-image: url(grafik/bg.gif);
        margin: 0px;
        text-align:center;
}

#mitte {
        width: 700px;
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        height: 200px;
        margin: auto;
        text-align:left;
}

#footer {
        background-color: #FFFFFF;
        border-top: 5px solid #940000;
        width: 700px;
        height: 80px;
        margin: auto;
        text-align:left;
}

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

Neue Beiträge

Zurück