Boxenmodell im IE mittig platzieren

  • Themenstarter Themenstarter ByeBye 246039
  • Beginndatum Beginndatum
B

ByeBye 246039

Hallo liebe Programmierer,

ich habe ab und zu das Problem, dass meine äußere Box im IE nicht mittig gestellt wird, trotz dessen, dass ich für die Box "margin: 0 auto;" angebe. Ich denke, dass es aufgrund eines anderen Befehls dazu kommt.
Kennt jemand das Problem und weiß, wodurch das verursacht wird?

Hier mal mein Beispiel-Skript:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><?xml version="1.0" encoding="utf-8" ?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meine Seite</title>

<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%; 
}

#wrapper {
width: 100%;
background-color:#FC9;
margin: 0 auto; /* Div soll zentriert werden */
min-height: 100%; 
height:100%; 
overflow: hidden !important; /* FF Scroll-leiste */ 
}

</style>
</head>

<body>
<div id="wrapper">
<div id="middle" style="margin:auto; width:420px; height:100%; min-height: 100%;">
  <div id="schatten_links" style="width:10px; background-color:#F00; float:left; height:100%; min-height: 100%;">&nbsp;</div>

<div id="content" style="width:10px; background-color: #009; float:left; width:400px; height:100%; min-height: 100%;">
	
    <div id="header">
      <div id="navigation"> navi </div>
      <div id="banner">banner <br />
        <br />
        <br />
        <br />
      </div>
    </div>

	
    <div id="inhalt" style="height:100%; min-height: 100%;">
   
    	<div id="left" style=" width:300px; background:#060; float:left; height:100%;  min-height:100%;">link<br />
   
      </div>   
        <div id="right" style="width:100px; background:#036; float:left; height:100%; min-height:100%;"> lrechts<br />
        
        </div>
    
   </div>


</div>

<div id="schatten_rechts" style="float:left; width:10px; background-color:#F00; min-height: 100%; height:100%;"></div>
<br class="clear" style="clear:both" />

</div>
</div>

</body>
</html>

Ich danke für euren Input.

LG SuLeu
 
Hallo SuLeu,

wenn du von "äußerer Box" sprichst, dann meinst du vermutlich den WRAPPER-Block in deinem Beispiel.

Der WRAPPER-Block ist Kindelement des BODY-Elements und soll 100% breit werden. Damit hat er die gleiche Breite wie sein Elternelement. Was soll da noch zentriert werden?
 
Hallo hela,

danke für deine schnelle Antwort.
Ich hatte das etwas falsch geschrieben. Die Box "middle" soll mittig dargestellt werden.

Zur besseren Erläuterung habe ich dir mal eine Ansicht vom IE und vom Firefox angehängt. Woher kommt nur die unterschiedliche Darstellung?

Gruß SuLeu
 

Anhänge

  • Unbenannt-2 Kopie.jpg
    Unbenannt-2 Kopie.jpg
    140 KB · Aufrufe: 13
Ich habe im Augenblick nicht die Möglichkeit deinen Quelltext mit dem IE6 anzusehen, aber im IE8 und im emulierten IE7 sitzt der Block bei mir in der Mitte.

Was mir allerdings aufgefallen ist: Vor dem Header deines XHTML-Dokuments taucht ein "XML-Prolog" auf:
Code: 
<?xml version="1.0" encoding="utf-8" ?>
Der gehört (wenn du ihn unbedingt mitsenden möchtest) in die erste Zeile/erste Spalte. Ich würde ihn aber weglassen, so wie hier: Conforming XHTML 1.0 Strict Template
 
Eigenartig. Ich habe das beim IE 8 getestet!? Hmm...

Danke für den Tipp mit dem xml-Tag. Also sollte das noch vor dem DOCTYPE, ganz oben?
 
SuLeu hat gesagt.:
Also sollte das noch vor dem DOCTYPE, ganz oben?
Zum Vergrößern anklicken....
Ja genau. Damit wird deklariert, dass es sich nachfolgend um ein XML-Dokument handelt und bei diesem Dokumenttyp muss die DTD lediglich vor dem Wurzelelement (hier: HTML-Tag) stehen.

Das ist aber nur notwendig, wenn dein Dokument vom Server als Inhaltstyp "application/xml" oder "text/xml" ausgeliefert werden soll. Ältere Browser können mit diesem Inhaltstyp wohl nicht umgehen ("Hörensagen"), weshalb es also viel einfacher und auch zulässig ist den XML-Prolog einfach wegzulassen und das XHTML-Dokument so wie jedes andere HTML-Dokument als Inhaltstyp "text/html" auszuliefern.
 
Bzgl. des XML-Prologs sei darauf hingewiesen, dass dieser IE6 und unter gewissen Umständen auch IE7 in den "Quirks Mode" schaltet, was in ihm/ihnen u.a. die hier angesprochene Fehlinterpretation von margin:auto zur horizontalen Zentrierung der Boxen zur Folge hat - siehe hierzu http://carsten-protsch.de/zwischennetz/doctype/einleitung.html#quirks

Gleiches erzielt man in allen IE-Versionen (5.x - 8) mittels eines HTML-Kommentars vor der Doctype-Deklaration.

HTML: 
<!-- HTML-Comment -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück