nicht angemeldet
IE zickt bei zentrierten divs
moin moin,
Ich möchte einen div horizontal zentrieren, klappt in Mozi und Opera, IE stellt sich quer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
#undergr {top:0px; width:685px; height:100%; z-index:0;
border: solid red;
margin-left:auto;
margin-right:auto;
position:relative; }
-->
</style>
</head>
<body>
<div id="undergr">
fgdgfd
</div>
</body>
</html>
Im IE wird das zwar zentriert dargestellt, jedoch ist das div nur eine Zeile hoch. Angabe height:200px; funktioniert zwar, hilft mir aber nicht weiter.
Lass ich bei DOCTYPE "http://www.w3.org/TR/html4/loose.dtd" weg, stimmt die Höhe allerdings ist der div nicht mehr zentriert.
Was nun?
so long
Vimes
-
hi,
Ich möchte einen div horizontal zentrieren, klappt in Mozi und Opera, IE stellt sich quer:
Lass ich bei DOCTYPE "http://www.w3.org/TR/html4/loose.dtd" weg, stimmt die Höhe allerdings ist der div nicht mehr zentriert.
von doctypes hab ich zwar keine ahnung aber wie du den div zentrieren kannst steht unter http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm (der IE braucht halt ne extra-einladung ;)
mfg stefan
-
hi,
von doctypes hab ich zwar keine ahnung aber wie du den div zentrieren kannst steht unter http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm (der IE braucht halt ne extra-einladung ;)
Das ist nicht ganz das Problem. Ich kann den div ja zentrieren, allerdings ist er dann nicht "hoch" genug, d.h. wirklich nur so hoch wie für den Inhalt nötig. Oder ich kann die Höhe richtig setzen, dann bricht die Zentrierung zusammen.
Die Frage ist also warum das Weglassen von "http://www.w3.org/TR/html4/loose.dtd" dem IE6 so viel ausmacht.
btw. mit "Strict" wird der div auch zentriert, aber die Höhe zerhackt.mfg.
-
hi
von doctypes hab ich zwar keine ahnung aber wie du den div zentrieren kannst steht unter http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm (der IE braucht halt ne extra-einladung ;)
Das ist nicht ganz das Problem. Ich kann den div ja zentrieren, allerdings ist er dann nicht "hoch" genug, d.h. wirklich nur so hoch wie für den Inhalt nötig. Oder ich kann die Höhe richtig setzen, dann bricht die Zentrierung zusammen.
Die Frage ist also warum das Weglassen von "http://www.w3.org/TR/html4/loose.dtd" dem IE6 so viel ausmacht.
btw. mit "Strict" wird der div auch zentriert, aber die Höhe zerhackt.wie gesagt, ich hab keine ahnung von doctypes. alles was ich weiss ist, wie du einen div für alle neueren browser zentrieren kannst (und dabei auch keine probleme mit der höhe bekommst). und valide ists auch (zumindest unter <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">). ich denke, wenn du dem obigen link folgst, wird sich dein problem klären. falls du dies schon tatest und nix dabei rumkam, sorry.
mfg + nix für ungut
stefan-
Gugucks,
Die gute Nachricht: so gehts im IE.
Die schlechte Nachricht: unter Mozi 0.9.6 gehts so nicht.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Test</title>
<style type="text/css">
<!--
body {height:100%;text-align:center;}
#undergr {
top:0px;
width:685px;
height:100%;
z-index:0;
border: solid red;
margin-left:auto;
margin-right:auto;
position:relative;
text-align:left;
}
-->
</style>
</head><body>
<div id="undergr" onclick="alert(this.parentNode.id)">
fgdgfd
</div>
</body>
</html>Meine Weisheiten beziehe ich übrigens aus dieser URL:
http://www.bluerobot.com/web/layouts/liebe Grüße, Uschi
-
Gugucks,
huhu,
Die gute Nachricht: so gehts im IE.
und neueren netscapes, operas, mozillas.
Die schlechte Nachricht: unter Mozi 0.9.6 gehts so nicht.
komisch, in der zwoten beta-version meines in basic selbst-geschriebenen browsers auch nich ;)
ebenso wenig im t-online soundso browser (name erfunden, aber sowas gibts sicher) oder meinem gameboy.ernsthaft: was meinst du, warum es neuere mozilla-versionen gibt?
doch wohl warscheinlich weil die alten verbesserungs-würdig waren. die versions-nummer 0.xxx lässt für mich eh auf eine quasi-beta schliessen. man kanns halt nicht allen recht machen, der inhalt wird ja trotzdem dárgestellt.Meine Weisheiten beziehe ich übrigens aus dieser URL:
http://www.bluerobot.com/web/layouts/kenn ich, da gibts ne richtige abhandlung zum dem thema.
liebe Grüße, Uschi
liebe grüsse zurück
stefan-
Hi stefan,
Die schlechte Nachricht: unter Mozi 0.9.6 gehts
so nicht.
ernsthaft: was meinst du, warum es neuere mozilla-
versionen gibt?das ändert leider nichts daran, daß alle Netscape 6.2-Browser nur auf Mozilla 0.9.4[.1] basieren.
Die haben also schon mal alle verloren.
Viele Grüße
Michael
-
-
-
-
-
-
Hi,
Ich möchte einen div horizontal zentrieren, klappt in Mozi und Opera, IE stellt sich quer:
Nein, er hält sich (ausnahmsweise mal) an die Spezifikation.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
#undergr {top:0px; width:685px; height:100%; z-index:0;
border: solid red;
margin-left:auto;
margin-right:auto;
position:relative; }
-->
</style>
</head><body>
<div id="undergr">
fgdgfd
</div>
</body>
</html>height:100%;
100% von was?
Natürlich, so wie es in der Spezifikation vorgesehen ist, vom Elternelement.
Welche Höhe hat das?
body: keine Höhenangabe, also auto.
100% von auto ergibt: auto;
also wird die Höhe konsequenterweise am Inhalt gemessen.Setze für Eltern, Großeltern usw. bis hinauf zu html die Höhe auf 100% und Du wirst das gewünschte Ergebnis haben.
(beim html-Element gilt als Elternelement das Fenster, dessen Höhe auf die tatsächliche Fenstergröße gesetzt ist).Im IE wird das zwar zentriert dargestellt, jedoch ist das div nur eine Zeile hoch. Angabe height:200px; funktioniert zwar, hilft mir aber nicht weiter.
Klar, eine explizite Angabe kann natürlich interpretiert werden.
Lass ich bei DOCTYPE "http://www.w3.org/TR/html4/loose.dtd" weg, stimmt die Höhe allerdings ist der div nicht mehr zentriert.
Tja, dann ist der IE im bug-kompatiblen Modus, sprich, er implementiert die bekannten Bugs älterer Versionen.
Was nun?
Richtig machen. S.o.
Andreas.