Webdesign: Fehlercheckliste

In diesem Post sammel ich Fehler und Lösungen, die in Webprojekten immer mal wieder auftauchen, grade in heranschreitendem Projektstatus passieren auf einmal „unerklärliche Dinge“ die durch ein kleines Detail entstehen.

IE: Eine Seite sieht auf einmal anders aus

Das Design ist umgestzt und bei der Implementierung bricht eine Seite aus dem Design heraus? Eine mögliche Ursache ist ein Kommentar vor der doctype Definition. IE7 und IE8 interpretieren sowas als Sprung zum QuirksMode und stellen die Seite nicht mehr wie gewohnt dar. Dies kann bei dynamischen Seiten schnell passieren, der W3 Validator zeichnet die Seite trotzdem als valide aus und in anderen Browsern wird die Seite richtig angezeigt. Das kann schnell mal Stunden kosten.

Der IE6 wird über den <?xml …?> Prolog in den Quirksmode gesetzt.

Update: Nur spezielle Seiten brechen im ie6/7 aus dem Design aus. Wenn man auf „Nice URLs“ setzt kann schonmal passieren das die REGEX ab Verzeichnistiefe 2++ nicht mehr greift und die ie Anpassungen vom Browser nicht mehr gefunden werden.

IE8: Seite sieht anders aus als im IE6 & IE7

Ein großer Wurf von Microsoft. Erst erzieht man uns Webdesigner zur doppelten Pflege von css Dateien und dann bringen sie auf einmal einen Browser raus der sich nah am Standard hält. Hier hilft die Überprüfung der Conditionl Comments auf den Zusatz lte (less than or equal = kleiner oder gleich):

<!–[if lte IE 7]>
<link rel=“stylesheet“ type=“text/css“ href=“css/base_ie.css“ media=“screen“/>
<![endif]–>
<!–[if IE 6]>
<link rel=“stylesheet“ type=“text/css“ href=“css/base_ie6.css“ media=“screen“/>
<![endif]–>

Dass bei relativen Pixeldesigns der IE8 alles etwas kleiner rendert, ist noch ein Problem mit dem ich mich noch beschäftigen werde. Spielen mit der Nachkommastelle bringt da nicht viel.

FF2 vs FF3 vs Webkit: relative Größenangaben

Man erstellt nach bestem Wissen und Gewissen eine nahezu pixelgenaue Umsetzung einer Vorlage und dann verrechnen sich alle Browser bei den „em“s. Ich habe festgestellt dass hier die dritte Nachkommastelle in den em Angaben Abhilfe schafft. Statt: body { font-size: 0.66em; } mal body { font-size: 0.661em; } ausprobieren. Half mir bei oben genannten Browsern. Leider nicht beim IE8.

FF2, IE6 Floatings

„Modernes“ Webdesign stellt schon große Ansprüche an die Browser. Wenn man die Informationen linearisiert noch zusammenhängend darstellen will, kommt man um eine Schachtelung von <ul>s in- und umeinander meist nicht herum. Also wird alles links oder rechts umfliessend angeordnet und im IE6 und FF2 wird dann häufig das umfliessen nach der Auflistung einfach fortgesetzt. Hier hilft ein <div style=“float:none“></div> nach den floating Elements.

FF2, IE6 Skalierende Hintergrundbilder

Aktuelle Browser sind toll. Egal ob Pixel-Angaben im CSS stehen, oder man sich die Mühe eines em-Designs gemacht hat, sie zoomen die komplette Seite groß und klein. Der FF2 und IE6 können leider nur Schriften vergrößern. Wenn man nun sein Design in der Relation zu der Schriftgröße setzt, werden die meisten Teile der Webseite richtig skaliert, nur die CSS background-images nicht :(

Hier hilft dann der folgende Workaround:
<div>
<div class=“bg“><img src=“bild.jpg“ class=“bild“/></div>
<div class=“content“>Hallo Ihr!</div>
</div>
und der Klasse „bg“ gibt man dann ein negatives „margin-bottom“ gleich der Bildhöhe mit.

Diese Methode bläht den Quelltext dann richtig auf, aber dafür skalieren so die Konstrukte vollständig mit.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.