IE 6, loose.dtd, document.body.clientWidth/Height und noch was
Patrick Andrieu
- browser
Hallo!
Für eine Seite, die sich im Moment im Testbetrieb befindet, wollte ich einen DIV-Bereich mittels JavaScript zentrieren. Meine Tests auf IE 5.5 liefen zufriedenstellend, auch Mozilla und Opera zentrierten alles fleißig, wie es sich gehört... *g* - bis ich die Seiten jemandem zeigte, der den Redmonder 6er hatte. Nichts war zentriert, berichtete er, und auf dem Screenshot, den er mir schickte, konnte ich mich selbst überzeugen, dass das zu zentrierende DIV oben "hing".
Daraufhin ließ ich mir die Werte in einer Alertbox ausgeben, und siehe da, IE 6 hatte als Einziger einen negativen Wert für die Positionierung. Das lag daran, dass er für document.body.clientHeight 0 ausgab, folgerichtig war document.body.clientHeight-DIVbreite/2 ein negativer Wert, und mein DIV durchbrach die Decke - sozusagen - anstatt schön in der Mitte der Seite zu kleben.
Ich hatte als DOCTYPE-Deklaration folgende:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Nachdem ich es in: <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> änderte, agierte der Redmonder 6er wie alle andern, und patschte mir mein DIV wo er hinsollte, in der Seitenmitte. Auch die Ausgabe mittels Alert ergab die gleichen Werte wie beim 5.5er. Für Mozilla wird natürlich window.innerWidth/Height ermittelt, aber bei diesem Browser macht es, hier wenigstens, keinen Unterschied, ob loose oder nicht loose...
Ich habe hier einige Beispiele online gestellt, die allerdings nur mit den IE Browsern 5.5 und 6 (oder auch mit Opera) betrachtet werden sollten, da diese nur zum diesem Testen erdacht worden sind. Besonders interessant sind hierbei die Unterschiede zwischen Opera und IE 6: Opera übergibt die gleichen Werte, egal ob die DOCTYPE-Deklaration mit der loose.dtd-URL zu Anfang der Datei steht oder nicht. Ferner übergibt Opera bei den 2 Beispielen mit den (fast) leeren Inhalten wenigstens die Innenhöhe des angezeigten Fensters, während IE 6 die Höhe des Inhalts ausgibt: Ist wie im Beispiel nur eine Zeile drin, erhalte ich 19 px (User mit anderen Default-Schriften und Auflösungen können da leicht abweichende Werte erhalten).
Die 5 Beispiele noch kurz erläutert, sonst sprechen sie ja von selbst *g*: Die Dateinamen mit ..._loose.html bedeuten, dass als DOCTYPE "<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">" vermerkt wurde. Bei allen andern wurde: "<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">" vermerkt.
http://www.atomic-eggs.com/temp/ie6_test.html
http://www.atomic-eggs.com/temp/ie6_test_loose.html
http://www.atomic-eggs.com/temp/ie6_test2.html
http://www.atomic-eggs.com/temp/ie6_test2_loose.html
Mit document.body.clientWidht verhält es sich auch so:
http://www.atomic-eggs.com/temp/ie6_test3_loose.html
Und nun die Frage: Warum ist es so? Sicher, ich gehe davon aus, dass es mit dem "Standards compliant mode" des Redmonder 6er zu tun hat, und habe auch den Hinweis von Maxx hier gelesen: [linkhttp://forum.de.selfhtml.org/archiv/2002/2/4339/#m24436] - aber, woher kommen diese Unterschiede jenach dem ob loose oder nicht loose? Warum gibt Opera in den Beispielen mit den leeren Fenstern wenigstens die Höhe der Anzeigefläche aus, während IE 6er nur die Höhe des Inhalts ausgibt? Wer hat hier "recht"? ;-)
Mir macht es natürlich nichts aus, die loose-lose (*g*) DOCTYPE-Deklaration zu nehmen, um meinen DIV auch im IE 6 zentriert zu bekommen, aber es ist schon seltsam, was?
Das "noch was" im Titel bezieht sich auf die Bookmarklets, die hier in den letzten 3 Monaten vorgestellt wurden (u.a. von René Grassegger und Zapp). Viele davon funktionieren im IE 6 nicht, unter anderem das von Zapp: http://forum.de.selfhtml.org/archiv/2002/1/3674/#m20823 und das folgende:
[InternetShortcut]
URL=javascript:var nv;if(document.title=='SELFHTML Forum: Neue Nachricht verfassen'){nv=0;}else{nv=0;}document.forms[nv].name.value='Patrick Andrieu'; document.forms[nv].email.value='patrick@selfhtml.com.fr'; document.forms[nv].url.value='http://www.selfhtml.com.fr/'; document.forms[nv].image.value='http://'; if(nv==0){document.forms[nv].body.value='Hallo\n\n'+document.forms[nv].body.value+'\n\nPatrick\n\n';}else{document.forms[nv].body.value='Hallo \n\n'+document.forms[nv].body.value+'\n\nPatrick\n\n';}void(null);
Hat jemand von den "Bookmarklets-Spezialisten" eine Idee?
Grüße,
Patrick, der den Redmonder 6er im Moment nur auf den Laptop hat...
Hallo,
Und nun die Frage: Warum ist es so? Sicher, ich gehe davon aus, dass es mit dem "Standards compliant mode" des Redmonder 6er zu tun hat, und habe auch den Hinweis von Maxx hier gelesen: [linkhttp://forum.de.selfhtml.org/archiv/2002/2/4339/#m24436] - aber, woher kommen diese Unterschiede jenach dem ob loose oder nicht loose? Warum gibt Opera in den Beispielen mit den leeren Fenstern wenigstens die Höhe der Anzeigefläche aus, während IE 6er nur die Höhe des Inhalts ausgibt? Wer hat hier "recht"? ;-)
Der IE6 interpretiert im "standards-compliant mode" die Hoehe des BODY-Inhaltes und nicht die Hoehe des Fensters bzw. des Canvas.
Mir macht es natürlich nichts aus, die loose-lose (*g*) DOCTYPE-Deklaration zu nehmen, um meinen DIV auch im IE 6 zentriert zu bekommen, aber es ist schon seltsam, was?
Versuche es bezogen auf den IE 6 mal so:
var breite, hoehe;
if(document.documentElement && document.compatMode=="CSS1Compat")
{
breite=document.documentElement.clientWidth;
hoehe=document.documentElement.clientHeight;
}
if(document.documentElement && document.compatMode=="BackCompat")
{
breite=document.body.clientWidth;
hoehe=document.body.clientHeight;
}
MfG, Thomas
Hallo Thomas!
Danke für Deine Antwort!
Ich habe aber noch ein paar andere Probleme auf der Seite, die auch von der DOCTYPE-Deklaration abhängen, ich werde die Abfrage sicher gebrauchen können.
Vielen dank und viele Grüße,
Patrick