Div bei IE6 nicht in der Mitte

[AlexDozer]

Hi,

ich habe auf meiner Seite ein Main-Div welches 740px breit ist und links und rechts den selben Abstand zum Rand haben soll. Bei IE 7 und FF klappt das auch wunderbar. Nur bei IE6 stimmt die Anordnung gar nicht. Das ist das Div einfach links am Rand.

Hier die Seite: Ballerspiel!
Hier die css-Datei:

* {
margin: 0px;
padding: 0px;
}
 
html {
height: 100%;
}
 
body {
height: 100%;
width: 100%;
background:      url(backgrounds.jpg);
}
.maindiv {
width: 740px;
min-height: 680px;
height: 100%;
background-color:  orange;
margin:  0px auto;
}
.ueberschrift {
background:url(ueberschrift.gif); 
background-repeat:no-repeat; 
width:700px; 
height:100px;
margin-left: 20px;
}
.game {
background:url(game.gif); 
background-repeat:no-repeat; 
width:340px; 
height:560px;
margin-left: 20px;
margin-top: 20px;
float: left;
}
.highscore {
background:url(highscore.gif);
background-repeat:no-repeat;
width:340px;
height: 400px;
float: right;
margin-right: 20px;
margin-top: 20px;
text-align: center;
}
.rest {
background:url(rest.gif);
background-repeat:no-repeat;
width: 340px;
height: 140px;
float: right;
margin-right: 20px;
margin-top: 20px;
}
td {
font-size: 20px;
}

maindiv ist die Klasse für das Main-Div in der Mitte. Müsste doch eigentlich passen oder?

Gruß Alex

 

[assmaje]

Pack deine ganze Webseite in ein div mit der id "all" (nur so als Beispiel, und mach das margin: 0 auto raus). Dann schreibst du in deine CSS-Datei:

#all {
     text-align:center;
}

So müsste es eigentlich in allen Browsern funktionieren. ;)

 

[AlexDozer]

Pack deine ganze Webseite in ein div mit der id "all" (nur so als Beispiel, und mach das margin: 0 auto raus). Dann schreibst du in deine CSS-Datei:

#all {
     text-align:center;
}

So müsste es eigentlich in allen Browsern funktionieren. ;)

Danke für den Tip! Werde ich heute Abend gleich ausprobieren!

 

[Efchen]

Hallo,

der Tipp von assmaje ist leider falsch.
Du hast es selbst schon richtig gemacht.
"text-align" ist eine Eigenschaft, um den Inhalt eines Elements zu zentrieren. Richtig muss es heißen "margin:0 auto", so wie Du es hast.
Dein Fehler, bzw der des IE6 ist es, dass er in den Quirks-Mode schaltet und dann die margin-Eigenschaft ignoriert. Tatsächlich ist es so, dass er im Quirks Mode auch text-align:center auf Block-Element anwendet, was aber falsch ist.

Der IE6 hat den Fehler, dass der DOCTYPE in der allerersten Zeile des Dokuments stehen muss. Da steht bei Dir aber der xml-Prolog. Entferne diesen und die Zentrierung funktioniert auch im IE6.

Ein Tipp allerdings noch: XHTML 1.0 Transitional schaltet Mozilla nur in den Almost Standards Mode, weswegen Darstellungsunterschiede nicht ausgeschlossen sind. Du solltest XHTML 1.0 Strict nehmen, da bist Du auch mehr noch gezwungen, guten Code zu schreiben.

Grüße,
-Efchen

 

[csstester]

Pack deine ganze Webseite in ein div mit der id "all" (nur so als Beispiel, und mach das margin: 0 auto raus). Dann schreibst du in deine CSS-Datei:

#all {
     text-align:center;
}

So müsste es eigentlich in allen Browsern funktionieren. ;)

Es macht ja fast sogar Spaß Dich immer wieder zu erwischen;)

Aber warum soll er denn die ganze seite in ein

<div id="all">

packen?
Er HAT doch schon die ganze Seite in einer Box... nämlich im Body;)

also reicht es im body

text-align:center;

zu definieren.

und was meinst du wohl was im FF passieren wird wenn er im
.maindiv das Margin:0 auto; entfernt?
dann aht er zwar im IE6 nun seite seite zentriert über den Body, aber das nützt im FF gar nix, da klebt sie dann am rand..

aaaalso das margin schön drin lassen;)

Und Efchen wieder schneller...

echt, kriegts der 6er auch hin mit margin:0 auto; ? muß ich mal checken... OK für´n IE6 langt es , aber anscheinend hab ich wenigstens beim 5er recht;)

 

[AlexDozer]

Hallo,

der Tipp von assmaje ist leider falsch.
Du hast es selbst schon richtig gemacht.
"text-align" ist eine Eigenschaft, um den Inhalt eines Elements zu zentrieren. Richtig muss es heißen "margin:0 auto", so wie Du es hast.
Dein Fehler, bzw der des IE6 ist es, dass er in den Quirks-Mode schaltet und dann die margin-Eigenschaft ignoriert. Tatsächlich ist es so, dass er im Quirks Mode auch text-align:center auf Block-Element anwendet, was aber falsch ist.

Der IE6 hat den Fehler, dass der DOCTYPE in der allerersten Zeile des Dokuments stehen muss. Da steht bei Dir aber der xml-Prolog. Entferne diesen und die Zentrierung funktioniert auch im IE6.

Ein Tipp allerdings noch: XHTML 1.0 Transitional schaltet Mozilla nur in den Almost Standards Mode, weswegen Darstellungsunterschiede nicht ausgeschlossen sind. Du solltest XHTML 1.0 Strict nehmen, da bist Du auch mehr noch gezwungen, guten Code zu schreiben.

Grüße,
-Efchen

Danke für den Hinweis mit dem Doctype! Darauf muss man erstmal kommen :)

Als ich Strict verwendet hatte hat er mir immer beim Applet gemeckert. Die genaue Fehlermeldung weis ich jetzt aber nicht mehr. Geht Applet auch mit Strict?

 

[Efchen]

Ehrlich gesagt keine Ahnung. Ich benutze keine Applets.