DIV Container mit CSS im IE 6 zentrieren. Die Lösung
Vor zwei Wochen habe ich mich ja bereits darüber beklagt, dass man im Internet Explorer 6 Div Container nicht vernünftig mit CSS ausrichten kann. margin-left:auto;margin-right:auto;, die eigentlich korrekte Lösung wird einfach Ignoriert.
Dank einem Kommentar von Evert aus Holland (den ich dummerweise im Zuge einer Spamsäuberungsaktion gelöscht habe, sorry) kenne ich nun eine gute Lösung. Sie ist eigentlich sehr simpel. Man erstellt einen DIV Container um alles herum und zentriert den Inhalt. Da das aber nur im IE 6 so ist, darf das CSS-File dazu auch nur im IE 6 geladen werden. Glücklicherweise gibt es da Kommentare, die als Browserweichen funktionieren.
Nun aber von vorne. Ich erstelle einen neuen DIV-Container (fett) um mein bestehendes Design herum.
Nun muss das CSS-File im IE 6 geladen werden. Wie gesagt, fungieren hier die Kommentare als Browserweiche.
Und zum Schluss noch der Inhalt der CSS-Datei. Für den Container #main muss man die Ausrichtung wieder zurücksetzten, da sonst der ganze Text zentriert ist.
Thank you Evert for this comment and sorry for deleting it. It was a mistake.
Dank einem Kommentar von Evert aus Holland (den ich dummerweise im Zuge einer Spamsäuberungsaktion gelöscht habe, sorry) kenne ich nun eine gute Lösung. Sie ist eigentlich sehr simpel. Man erstellt einen DIV Container um alles herum und zentriert den Inhalt. Da das aber nur im IE 6 so ist, darf das CSS-File dazu auch nur im IE 6 geladen werden. Glücklicherweise gibt es da Kommentare, die als Browserweichen funktionieren.
Nun aber von vorne. Ich erstelle einen neuen DIV-Container (fett) um mein bestehendes Design herum.
<div id="container">
<div id="main">
<div id="navLeft">
Navigation
</div>
<div id="content">
inhalt
</div>
</div>
</div>Nun muss das CSS-File im IE 6 geladen werden. Wie gesagt, fungieren hier die Kommentare als Browserweiche.
<!--[if IE 6]> <link href="ie.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]-->
Und zum Schluss noch der Inhalt der CSS-Datei. Für den Container #main muss man die Ausrichtung wieder zurücksetzten, da sonst der ganze Text zentriert ist.
#container {
text-align: center;
}
#main {
text-align:left;
}Thank you Evert for this comment and sorry for deleting it. It was a mistake.
Kommentare
Jimy
06.03.08 13:07
Kaede
30.03.08 06:30
Statt des zusätzlichen Containers hilft mir bei dem Problem eine ähnliche Lösung: text-align:center; als Eigenschaft für body (oder html) nehmen. Denn wozu einen Container erschaffen, wenn man schon einen großen, globalen hat?
Natürlich darf man auch in diesem Fall nicht vergessen, für deinen #main-Container die Schrift wieder vernünftig auszurichten.
Die Browserweiche kann man sich bei diesem Fix auch sparen, da die anderen Browser es ordentlich interpretieren: die Änderungen sind ja, logischerweise, eigentlich nicht vorhanden ;)
Pumuckl
14.05.09 12:40
Danke vor allem an meinen Vorposter Kaede. Der ultimative Tipp :).