Category Archives: LAMP / Webentwicklung

Beiträge zu PHP, MySql, aber auch Javascript, CSS

Flackern beim Seitenwechsel im MS IE – Nachtrag

Posted on by

In einem der letzten Blog-Beiträge ging es um das Flackern des MS IE beim Seitenwechsel. Dort hatte ich zwei Tricks aufgeführt, mit denen man ohne Serveränderungen in manchen Fällen – leider nicht immer – eine Verbesserung herbeiführen kann.

In diesem Beitrag möchte ich kurz auf die Behandlung von MS IE-Flackern bei der Integration von Hintergrundsbildern für die gesamte Webseite eingehen. Da gibt es eine Geschichte, die es sehr verständlich macht, warum viele Webseiten-Entwickler den MS IE verfluchen.

Also – wie lädt man typischerweise Hintergrundsbilder für die gesamte HTML-Seite? Im -Tag per css-Anweisung. Typischerweise haben dann viele Seiten einer Domain dasselbe Hintergrundsbild und einen im wesentlichen gleichen Aufbau – es ändern sich beim Seitenwechsel nur ganz bestimmte BEreiche der Seite. Dann will man natürlich, dass ein Seitenwechsel sanft vor sich geht und der Hintergrund nicht flackert. Das Hintergrundsbild und alle anderen unveränderten Seitenelemente sollen beim Seitenwechsel statisch angezeigt, nicht neu aufgebaut oder neu geladen werden. Wozu gibt es schließlich den Browser-Cache …

Leider wird man aber beim MS IE in Abhängigkeit von der MS IE-Version feststellen, dass es dort bei Seitenwechseln, bei denen sich das Hintergrundsbild und wesentliche Anteile der Webseite (Grundaufbau) nicht ändern, dennoch zu Flackern kommt. Der Hintergrund wird kurz weiß, das Bild wird neu geladen. Das passiert ggf. nicht immer aber, doch sehr häufig. Wenn man genauer forscht, wird man feststellen, dass das Flackern besonders häufig oder immer bei Seiten auftaucht, bei denen zusätzlich zu den Hintergrundsbildern Flash-Elementen oder Javascript-Anteile vorkommen.

Deshalb sind ggf. zwei Tricks zu kombinieren, um das Flackern weg zu bekommen:

Fall 1) Es wird kein Javascript in der Webseite benutzt

Dann hilft es, das Hintergrundsbild nochmals (also zusätzlich zum Hintergrund im <BODY>) in einem DIV zu laden, das man per z-Index unter den gesamten übrigen Inhalt der Webseite legt. Hierzu benötigt man natürlich einen übergeordneten DIV-Container, in dem man das DIV für das Hintergrundsbild und ein DIV für den gesamten übrigen Inhalt absolut positioniert und übereinander legt.

Fall 2) Es wird Javascript benutzt, z.B. um Flash-Objekte in die Seite zu integrieren

Wir verwenden z.B. SWFObject und entsprechendes Javascript, um Flash zu integrieren. Es hat mich viele Tests gekostet, bis ich herausfand, dass allein schon das Einfügen eines Tags

<script type=”text/javascript”></script>

(also ohne jeden Code !) oder gar eines Tags

<script language=”JavaScript” src=”script/swfobject2.js” type=”text/JavaScript”></script>

im Header der HTML-Datei bereits ein Flackern beim Seitenwechsel zwischen Seiten mit Hintergrundsbildern auslöst. Für den Bruchteil einer Sekunde wird der Hintergrund weiß, das Bild wird neu geladen. Selbst wenn in der HTML-Seite keinerlei Javascript-Code ausgeführt wird. Unglaublich nicht ? Noch unglaublicher ist aber der Trick, der beim MS IE hilft:

Man kopiere den gesamten Script-Kram, soweit es die Logik der Seite zulässt, an das Ende des HTML-Codes und zwar unmittelbar vor das Ende des abschließenden </BODY>-Tags. Das ist zwar ungewöhnlich, aber kein Browser meckert einen formalen Fehler an. Und siehe da, auf einmal hört auch im MS IE das Flackern auf.

Das läßt tief blicken, in welcher Weise die Javascript-Engine in den MS IE integriert ist – Entschuldigung bei MS ist das ja eh eine Extrawurscht und nix Normales (JSCRIPT).

Leider kann es in einigen Fällen so sein, dass Javascript-Code zwingend vor dem Laden der übrigen HTML-Elemente ausgeführt werden muss. Dafür habe ich auch keine echte Lösung parat. Aber in vielen Fällen hilft der beschriebene Trick.

Überflüssig anzumerken, dass man den ganzen Quatsch so nicht braucht , wenn
man Firefox benutzt. Gott sei Dank hat ja nun Firefox zumindest in Deutschland dem MS IE den Rang abgelaufen.

Reihenfolge relativ und absolut positionierter DIVs

Posted on by

Anne kam vor kurzem mit einem typischen Problem im Zusammenhang mit der Positionierung von relativ und absolut positionierten DIVs in einem Container-DIV.

Fast wie immer klappte alles im Firefox oder in Opera unter Linux (und Windows) – nur nicht im MS IE (7,8).

Worum ging es?

Das Container-DIV hatte nur die Aufgabe,  einen definierten Bereich innerhalb der Webseite vorzugeben und bei Bedarf Scrollbedarf zuzuschalten. Das DIV war in seiner Umgebung relativ positioniert.

Innerhalb des Containers hatte Anne eine Reihe aufeinanderfolgender, relativ positionierter  DIVs undefinierter Höhe.  Die Elemente der DIVs wurden durch Datenbankinhalte gefüllt. Insgesamt ergaben die relativ positionierten DIVs  einen Hintergrundsbereich innerhalb des Containers. Alle befanden sich in der gleichen Ebene, die durch eine z-Index festgelegt wurden.

Zusätzlich gab es ein weiteres DIV, das absolut positioniert wurde und für das ein höherer Wert im z-Index gewählt wurde. Dieses DIV sollte also immer vor den relativ positionierten DIVs angezeigt werden.

Also:

<div id=”container” …. >
 
<!– das absolut positionierte DIV –>
<div id=”abs” style=”position:absolute; …. z-index:10; “>
…..
</div>
 
<!– die relativ positionierten DIVs –>
<div id= “rel_1 ” style= “…; z_index:1; ” ….. > …. </div>
<div id= “rel_2 ” style= “…; z_index:1; ” ….. > ….  </div>
…..
…..
   
</div>

Im Firefox wurde das abslout positionierte DIV auch brav über allen anderen DIVs angezeigt; im MS IE7 dagegen nicht und im MS IE 8 nur, wenn der Seitenaufruf mit geänderten PHP-Parametern geschah. Ein reiner Seiten-Refresh führte immer zu einem Ausblenden des absolut positionierten DIVs.

Die Lösung 

Was hatte Anne falsch gemacht ? Aus meiner Sicht gar nichts. Außer, dass sie hätte davon ausgehen müssen, dass der MS IE ein wenig Hilfe benötigt:

Der MS IE kriegt die obige Reihenfolge nämlich nicht auf die Reihe – im wahrsten Sinne des Wortes !

Hätte Anne die Reihenfolge von vornherein wie folgt gewählt, wäre nichts passiert:

<div id=”container” …. >
 
<!– die relativ positionierten DIVs –>
<div id=”rel_1″ style=”…; z_index:1;” ….. > ….  </div>
<div id=”rel_2″ style=”…; z_index:1;” …..> ….  </div>
…..
…..
 
<!– das absolut positionierte DIV –>

<div id=”abs” style=”position:absolute; …. z-index:10; “>
…..
</div>
 
</div>
n
Merke:

Im MS IE ist es zwingen, die relativ positionierten DIVs vor den absolut definierten DIVs zu definieren. Sonst bekommt der MS IE den Ebenenaufbau nicht hin.

Arme Web-Designer ! Das ist kein Spass mit dem MS IE.

Flackern beim Seitenwechsel im MS IE

Posted on by

Viele Websites beinhalten Seiten, die vom Grundaufbau/Layout her völlig identisch aussehen. D.h., sie beinhalten viele begrenzende oder Hintergrunds-Elemente, die auf allen Seiten völlig gleich aussehen.

Bei einem Wechsel zwischen zwei Seiten erwartet man dann, dass die identisch aussehenden Seitenelemente während des Wechsel ohne jedes Flackern dargestellt werden. Der Wechsel soll für das Auge des Betrachters also so ablaufen, als ob nur die unterschiedlichen Seitenanteile im Wechsel neu aufgebaut werden. Die identisch aussehenden Elemente sollen beim Seitenwechsel dagegen als völlig statisch erscheinen. Es soll vor allem zu keinem Flackern beim Seitenaufbau kommen. Flackereffekte (kurzzeitige Hell-Dunkel-Wechsel in bestimmten Seitenbereichen) wirken auf die meisten Betrachter irritierend.

Leider stellt man aber immer wieder fest, dass es gerade bei komplexeren Seiten im MS IE zu diesem unangenehmen Flackern kommt – oft genau in den Bereichen, die beim Seitenwechsel eigentlich unverändert bleiben. Dagegen kann man bei Browsern wie Firefox, Opera, Konquerer oft  einen stabilen, flackerfreien Bildwechsel während des Renderns der neuen Seiten konstatieren. (Ausnahmen stellen Seiten dar, die Flash-Elemente beinhalten.) Wir haben das Problem schon des öfteren mit gewöhnlichen HTML-Seiten, aber auch im Zusammenhang mit PHP-Seiten festgestellt.

Wie kann man als Entwickler das nervige Flackern im MS IE in den Griff bekommen ?

Hierfür gibt es nach unserer Erfahrung mindestens zwei Tricks:

Trick 1: MS IE spezifisches Metatag

Im MS IE kann man den Seitenwechsel mit (teils spektakulären) Effekten unterlegen, die eine bestimmte Zeitdauer haben. Die Render-Engine arbeitet in diesem Modus anders als gewöhnlich. Wir nutzen das an dieser Stelle zur Vermeidung des Flackerns aus. Zur Parametrierung der Effekte dient ein Metatag der folgenden Form

<meta http-equiv=”Page-Enter” content=”revealtrans(duration=0.1,transition=5)” >

Der Parameter “duration” gibt die Zeitdauer des Effektes in Sekunden an, der Parameter “transition” den ausgewählten Effekt. In unserem Fall wird die Seite von oben nach unten aufgebaut (abgerollt) – die Zeitdauer ist allerdings so kurz gewählt, dass man das praktisch nicht merkt. Der von uns gewünschte Seiteneffekt ist allerdings der, dass ein Seitenwechsel nun in vielen Fällen völlig stabil und ohne jedes Flackern vor sich geht.

Weitere Information zu “revealtrans” findet man im Internet.

Trick 2: Einbau von Dummy-DIVs mit einer Opacity-Anweisung

Auch wenn man auf einem Layer der Webseite mit hohem z-Index ein Dummy-DIV mit einer Opacity-Vorgabe integriert, reagiert die Render-Engine des MS IE positiv im Sinne der Flackerfreiheit. Ein Element der Form :

<div style=”position:absolute; width:0.5em; height:0.5em; top:0.1em; left:0.1em; filter: alpha(opacity=66); -moz-opacity: .66; opacity: .66; z-index:10;”></div>

ist an sich zwar völlig sinnlos (da ohne Hintergrundsfarbe), zieht aber dennoch die Flackerfreiheit des Seitenaufbaus nach sich. (Ausschlaggebend für den MS IE ist dabei übrigens die “filter”-Anweisung.)

Viel Spass in Zukunft beim “Beruhigen” des MS IE.

Nachtrag am 18.11.2009: 

Im Falle von Hintergrundsbildern, die per CSS in Tags eingebunden werden, helfen die obigen Tricks in der Regel nichts. Siehe aber die Hinweise von Anne zu weiteren Möglichkeiten im Kommentar ! Danke, Anne !

Nachtrag am 28.11.2009

Anne hat mich darauf aufmerksam gemacht, dass beim MS IE in vielen Fällen auch der unauffällige Einbau eines kleinen Dummy-Flash-Films, der eigentlich nichts tut, zur Stabilisierung des Bildaufbaus und zur Vermeidung von Flackereffekten hilft. Wegen evtl. Schwierigkeiten mit Flash-Filmen in Gecko/Mozilla-Browsern ist das aber kein Trick, den man generalisieren könnte.

Interessant ist auch, dass im Moment das
gleichzeitige Öffnen mehrer Tabs mit Webseiten, die per SWFObjects 2.x eingebaute Flashfilme beinhalten, im Firefox zu Flackereffekten beim Seitenwechsel führt – zumindest unter Linux.  Es ist ein Leiden !

Ferner hat mich Anne mit einigen Beispielen, bei denen im BODY-Tag Hintergrundsbilder per CSS verankert wurden, davon überzeugt, dass es im MS IE (alle Versionen) manchmal sogar von Nachteil sein kann, den “revealtrans”-Effekt einzusetzen. Besser ist es da anscheinend, das Bild, das man im Body-Tag untergebracht hat, nochmal in Form eines gewöhnlichen IMG-Tags in einem DIV zu hinterlegen, das man per z-index unter allen anderen Seitenelementen einfügt.

OK, OK, ich gebe auf – es gibt keine Standardrezepte – man muss halt herumexperimentieren.

Wenn man Zeit hätte, könnte man ja die Sache mal systematisch untersuchen – Seitenwechsel bei vorhandenen Hintergrundsbildern, beim Vorhandensein  von Flash und das in allen gängigen Browsern unter Linux und  MS Windows.  Ach ja, man müßte dann auch noch die unterschiedlichen Arten der Einbindung von Flashfilmen berücksichtigen …..

Apache 2, Zeichensätze und Direktiven

Posted on by

Gestern hielt mich ein kleines Problemchen mit der Zeichensatzauswahl auf Apache Server unter SLES 9 auf.

Problembeschreibung

Mehrere von meiner Firma entwickelte Webseiten waren per Metatag-?nweisung vom ISO-8859-1 Zeichensatz

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

auf UTF-8 umgestellt:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

Bei den anschließenden Test mit einem Browser auf dem Server selbst sahen die Webseiten OK aus. Umlaute wurden korrekt dargestellt. Chaotisch wurde es jedoch, als wir die Seiten auf einem separaten Client-PC betrachten wollten. Alle Umlaute waren falsch. Zwar half eine explizite Umstellung des zu wählenden Zeichensatzes im Browser – aber eigentlich wünscht man sich hier eine automatische, richtige Wahl.

Ein Test derselben Web-Seiten auf einem anderen Apache-Server ergab dagegen gute Ergebnisse. Die Sache hatte also nichts mit Browser-Einstellungen oder anderen Client-Problemen zu tun.

Response Header

Weiter kommt man in einem solchen Fall zunächst dadurch, indem man sich ansieht, was der Server dem Browser nach der Seitenanfrage eigentlich so übermittelt. Den sog. “Response Header” kann man sich u.a. mit Funktionen des Firefox-Browsers ansehen. Die notwendige Angaben erhält man im aktuellen FF über den Menüpunkt:

“Extras” -> “Web Developer” -> “Information” -> “View Response Headers”.

Hier kam dann tatsächlich die Angabe, dass als Zeichensatz ISO-8859-1 gelten soll – und zwar über die Header-Zeile:

Content-Type: text/html; charset=iso-8859-1

Beim dem anderen getesteten Server, mit dem der Browser “richtig” zusammenarbeitete, war im Response Header dagegen gar keine Vorgabe zum Zeichensatz eingetragen. Der Befund, dass die Schwierigkeiten mit Servereinstellungen zu tun hatten, bestätigten sich also.

Leider sind die Einstellungen zu Zeichensätzen für den Apache2 in unterschiedlichen Linux-Distributionen auch in unterschiedlichen Dateien untergebracht. Ein wenig Suchen nach Begriffen wie “Charset” oder “ISO-8859” in den Dateien der Apache2-Konfigurationsdateien ist im Einszelfall daher ggf. notwendig.

Zeichensatzvorgaben auf dem Apache unter SLES 9

Bei SLES9 wird man in der Datei

/etc/apache2/mod_mime-defaults.conf

fündig. Auf anderen Servern können die Einstellungen aber auch in einer Datei “/etc/apache2/conf.d/charset” vorgegeben sein!

Dort werden nach Language-Festlegungen Vorgaben für Zeichensätze in der Form

AddCharset ISO-8859-1 .iso8859-1 .latin1
AddCharset utf-8 .utf8

getroffen. Wegen der Zeile für utf-8 wundert man sich vielleicht, wieso dann im obigen Beispiel im Response Header die Vorgabe ISO-8859-1 auftaucht. Der Grund ist/war auf dem “problematischen” Server die zusätzliche Zeile

AddDefaultCharset ISO-8859-1.

Ein testweises Auskommentieren und Neustarten des Apache2-Servers zeigte dann tatsächlich, dass diese Zeile die Ursache für die “Probleme” auf dem Browser bzw. die ISO-8859-1 Zeile im Response Header darstellte.

An dieser Stelle ist nun aber ein wenig Kontemplation gefragt, denn ein generelles Auskommentieren kann ja ggf. auch ein Sicherheitsrisiko darstellen. Und was macht man, wenn man Einstellungen auf einem Server treffen muss, über dessen Apache-Konfigurationsdateien man keinen Einfluss hat? Dies ist ja die typische Situation bei Hostern. Zudem fragt man sich, wie man
vorgehen muss, wenn man auf folgende Situationen trifft:

a) Man benötigt für die Dateien in ganz bestimmten definierten Verzeichnissen Charset-Vorgaben, die dem Default nicht entsprechen.

b) Man hat einen Mix aus Seiten mit unterschiedlichen Charset-Festlegungen im gleichen Verzeichnis.

Ich versuche weiter unten, nach einem Blick in die Apache-Konfiguration meinen “best guess” abzugeben.

Was sagt die Apache-Doku ?

In der Apache Dokumentation auf der Webseite “http://httpd.apache.org/docs/2.0/mod/core.html” finden sich u.a. folgende Hinweise (die Hervorhebungen habe ich vorgenommen)

Description: Default charset parameter to be added when a response content-type is text/plain or text/html
Syntax: AddDefaultCharset On|Off|charset
Default: AddDefaultCharset Off
Context: server config, virtual host, directory, .htaccess
Override: FileInfo
Status: Core
Module:coreThis directive specifies a default value for the media type charset parameter (the name of a character encoding) to be added to a response if and only if the response’s content-type is either text/plain or text/html.

This should override any charset specified in the body of the response via a META element, though the exact behavior is often dependent on the user’s client configuration.

A setting of AddDefaultCharset Off disables this functionality. AddDefaultCharset On enables a default charset of iso-8859-1. Any other value is assumed to be the charset to be used, which should be one of the IANA registered charset values for use in MIME media types. For example:

AddDefaultCharset utf-8

AddDefaultCharset should only be used when all of the text resources to which it applies are known to be in that character encoding and it is too inconvenient to label their charset individually.

One such example is to add the charset parameter to resources containing generated content, such as legacy CGI scripts, that might be vulnerable to cross-site scripting attacks due to user-provided data being included in the output. Note, however, that a better solution is to just fix (or delete) those scripts, since setting a default charset does not protect users that have enabled the “auto-detect character encoding” feature on their browser.

Einige ergänzende Kommentare:

Ist die Direktive AddDefaultCharset gesetzt, so fügt Apache Zeichensatzinfos zum Content-Type-Header von HTTP-Antworten hinzu. Z.B.:

Content-Type: text/html; charset=iso-8859-1

Ist eine solche Angabe vorhanden, so übersteuert das bei den meisten Browsern eine evtl. vorhandene Meta-Tag-Angabe zu Zeichensätzen in der empfangenen HTML-Datei. (Dies war ja gerade die Ursache des oben beschriebenen Problems).

Man beachte, dass man lt. der obigen Beschreibung ein solches Verhalten auch durch

AddDefaultCharset Off

explizit abschalten kann.

Ferner kann man – soweit sonstige Einstellungen das zulassen – die Direktive “AddDefaultCharset” auch zusammen mit “.htaccess”-Dateien, also verzeichnisspezifisch, einsetzen.

Lösungsansätze für die Zeichensatzsteuerung

Auf den von mir selbst verwalteten Servern setze ich grundsätzlich eine serverweite Einstellung ein – in meinem Fall ISO-8859-1 (per AddDefaultCharset ISO-8859-1 ) in den globalen Apache-Einstellungen (bei SLES 9 in /etc/apache2/mod_mime-defaults.conf).

Ein Grund hierfür sind die Sicherheitsbedenken, die in der Apache-Doku bzgl. des
Abschaltens anklingen und auf die man in diversen Internet-Artikeln treffen kann.

Virtuelle Domainen mit spezifischen Default Zeichensätzen

Für größere Kunden-Projekte (Webseiten-Entwicklung) lege ich mir zumeist separate virtuelle Domainen an. (Das erleichtert später den Aufruf der Seiten beim Testen, macht die Umgebung kontrollierbarer und spiegelt schon in der Entwicklungsphase mehr die Realität der Kundensicht wieder.) Habe ich eine durchgehend einheitliche Zeichensatzverwendung für die Webseiten der virtuellen Domaine zu erwarten, setze ich den Default-Zeichensatz in der Konfiguration der virtuellen Domaine per “AddDefaultCharset” auf den entsprechenden Wert.

Einsatz von “.htaccess”-Dateien für verzeichnisspezifische Festlegungen

Muss ich mit unterschiedlichen Zeichensätzen der zu erstellenden Webseiten rechnen, so versuche ich eine Strategie zu fahren, bei der man die Dateien mit jeweils gleichen Zeichensätzen in Verzeichnissen bündelt. Dann kann man nämlich zum “.htaccess”-Mechanismus greifen und die verzeichnisspezifischen Einstellungen über die Festlegungen in zugehörigen “.htaccess”-Dateien treffen. Alternativ kann man auf Servern, die der eigenen Kontrolle unterstehen, aber auch über gezielte Direktiven in <Directory>-Abschnitten zur jeweiligen Domaine vorgehen.

Über den Einsatz von “.htaccess”-Dateien erschlägt man übrigens evtl. Probleme bei den meisten Providern – soweit sie den “.htaccess”-Mechanismus überhaupt zulassen.

Verzeichnisspezifisches Abschalten des Default Zeichensatzes kann u.U. eine Möglichkeit sein

Hat man einen Mix aus Dateien mit unterschiedlichen Zeichensätzen in ein und demselben Verzeichnis einer (virtuellen) Domaine zu erwarten, so schalte man entweder die Zeichensatzvorgabe für die gesamte Domaine oder das Verzeichnis ab (“AddDefaultCharset Off”). In letzterem Fall natürlich wieder über eine “.htaccess”-Datei.

Der gezielte Einsatz von Dateiendungen

Will man zu keinem der oben genannten Mittel greifen, so kann man immer noch über Dateiendungen arbeiten. Die Zusatzangaben zu Datei-Endungen in den Direktiven “AddCharset” legen nämlich fest, auf welche Dateien der Zeichensatz angewendet werden soll.

AddCharset utf-8   .utf8

Eine betroffene Datei “test.html” muss dann halt in “test.html.utf8” umbenannt werden. Nach gleichem Muster verfährt man für Dateien mit anderen Zeichensätzen – also: Datei-Endung für den Zeichensatz vorgeben und hinten an den Dateinamen anhängen.

Links und weitere Informationen

Grundsätzliches :
http://httpd.apache.org/docs/2.0/mod/core.html

Generelle Möglichkeiten, die Zeichensatz-Regeln des Apache-Servers für spezielle Verzeichnisse oder Files anzupassen, werden unter folgenden Links diskutiert:
http://www.w3.org/International/questions/qa-htaccess-charset
http://www.linuxforen.de/forums/showthread.php?t=229702

Das Vorgehen zur konsequente Umstellung eines LAMP Servers auf UTF-8 kann man z.B. unter folgenden Links nachlesen:
http://wiki.hetzner.de/index.php/Utf-8
http://www.xaranetblog.de/page/5/

Vertikales Zentrieren einer Webseite

Posted on by

Manchmal hat man es mit Kunden zu tun, die ihre Webseite unbedingt vertikal zentriert in ihrem Browserfenster dargestellt haben wollen. Dafür gibt es mehrere Lösungen – u.a. den Einsatz von Framesets und/oder von Tabellen. Frameset-Lösungen und reine Tabellenlösungen lassen sich vollständig W3C-konform erstellen.

Nicht jeder mag aber Framesets. Und bei reinen Tabellenlösungen gibt es Probleme, wenn man als DTD aus irgendwelchen Gründen das “http://www.w3.org/TR/html4/loose.dtd”-Dokument laden will oder muss.

Nachfolgend daher mal eine etwas andere Lösung, die allerdings nicht standardkonform ist und auf der Zuweisung einer Style-Vorgabe zum HTML-Tag basiert. Die Lösung funktioniert in vielen relativ neueren Browsern – u.a. FF 3.x, MS IE 7,8, Konqueror 4.3.x, Opera 9.64. Sie ist ferner zusammen mit dem oben genannten DTD funktionsfähig.

Folgende grundsätzliche CSS-Vorgaben sind erforderlich:

html { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow:hidden; }
body { height: 100%; width: 100%; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size:10px; overflow:hidden; }
table { table-layout:fixed; position:relative; border-collapse:collapse; border-width:0px; }

Nicht standardkonform ist hier die erste Zeile. Sie sorgt aber dafür, dass nachfolgende 100%-Dimensionierungen sich weitgehend an den Dimensionen des Browser-Fensters orientieren. Es gibt kleine Abweichungen bei der Zentrierung – die sind aber so klein, das man damit aus meiner Sicht in der Praxis leben kann.

Den weiteren Aufbau verdeutlich folgender HTML-Code (, dessen CSS-Anteile man natürlich auslagern kann und sollte. Für erste Tests finde ich es aber immer praktisch, direkt am Objekt zu arbeiten):

<body>
  <div style=”width:100%; height:100%; border:0px #FF0000 solid; overflow:auto;”>
   <table style=”height:98%; width:98%; table-layout:fixed; margin:0px;” border=”0″>
    <tr>
     <td style=”width:100%; height:100%; text-align:center;”>
      <div style=”background-color:#FC0; border:#00C 0px solid; width:40.0em; height:40.0em; margin:auto; line-height:40.0em;”>Hallo</div>
     </td>
    </tr>
   </table>
  </div>
</body>

Das der Tabelle vorgeschaltete DIV sorgt für eine automatische Bereitstellung von Scrollbars, wenn das Browserfenster kleiner als der in der Tabellenzelle dargestellte Inhalt wird. Die 98% bei der Dimensionierung der Tabelle unterdrücken ein initiales Anschalten von Scrollbalken in manchen Browsern. Das innere DIV dient nur der Darstellung eines repräsentativen Objekts. Es könnte aber den gesamten geplanten Seiten-Inhalt aufnehmen.

Die Lösung ist sicher nichts für Puristen, die ihren Seiten ein W3C-Logo nach bestandenen Validator-Tests anfügen wollen. Aber wie gesagt, sie funktioniert in vielen Browsern und zusammen mit den “loose.dtd” – Deklarationen.