Margin: auto Problem im Internet Explorer

Kategorie: Blog::Web-Entwicklung::CSS

erstellt am 21.07.2008 um 12:45h

Wenn man einen Inhalt (oder eine Box) im Browser zentrieren möchte, kann man das das CSS-Attribut margin: auto; benutzen.

#centertext
{
	margin: auto;
	width: 250px;
}

Leider kommt es häufig vor, dass der Internet Explorer im Quirks-Modus^[1] läuft, dann wird das margin: auto; nicht richtig interpretiert.
Die erste Zeile einer HTML-Datei muss eine der folgenden DOCTYPE-Definitionen sein, damit der IE nicht im Quirks-Modus^[1] läuft.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Manchmal wird der IE absichtlich von einem Entwickler in den Quirks-Modus^[1] versetzt. Folgender kleine Hack kann dann das margin: auto; Problem trotzdem erwirken.

#centertextcontainer
{
	text-align: center;
}

#centertext
{
	margin: auto;
	width: 250px;
	/* text-align muss gesetzt werden da sonst von container geerbt wird. */
	text-align: left;
}

Der dazugehörige HTML-Quellcode könnte so aussehen:

<div id="centertextcontainer">
    <div id="centertext">
        Hier steht der Center-Text
    </div>
</div>

Quellen:
[1]: Artikel zum Quirks-Modus auf Wikipedia

Kommentare

Noch keine Kommentare vorhanden.

Neuer Kommentar

E-Mail Benachrichtigung

Sie können hier Ihre E-Mail Adresse hinterlegen, bei jeder Änderung oder bei einem neuen Kommentar erhalten Sie eine kurze E-Mail.
Ihre E-Mail Adresse wird nur in Verbindung mit diesem Beitrag in unserer Datenbank gespeichert. Sie wird nicht zu Werbezwecken benutzt, an Dritte weitergegeben oder an irgendeiner Stelle veröffentlicht.

Blog::Web-Entwicklung::CSS