Darstellungsprobleme mit Listen und Aufzählungen?
Unordered Lists sind sicher eines der am häufigsten eingesetzten Gestaltungs-Elemente des Webdesigners. Auch wenn Ihr CMS oder Dreamweaver zeitsparend den HTML-Code dafür erzeugen, sei die Frage gestattet, wie es eigentlich mit der Darstellung von Listen auf verschiedenen Browsern aussieht?
Vertikale Abstände und Bullets von Aufzählungen
Wir wollen hier doch keine Erbsen zählen, oder vielleicht doch? Da die Konkurrenz so nett ist uns dazu einzuladen, möchten wir das Angebot nicht ausschlagen.
Jedenfalls weisen wir auf ein Phänomen hin, welches sich dem Betrachter auf unzähligen Websites erschließt, egal ob ohne DocType-Angabe oder mit den Doctypes HTML 4.01 oder XHTML 1.0 mit oder ohne Strict.
Listen - speziell Aufzählungen, also unordered Lists, bzw. ihre Bullets machen Ärger, denn wie vertikale Abstände der Listen zu umgebenden Blockelementen oder vertikale Abstände der Listenpunkte dargestellt werden, hängt nicht nur vom DocType, sondern tatsächlich auch vom Webbrowser und Betriebssystem ab.
Doctype-abhängige Fallstudien
Gehen wir wenigstens kurz auf das angesprochene Browserproblem ein und sehen wir uns einige HTML-Seiten an, die jeweils eine Liste mit eingerückter Unterliste und umgebenden Paragraphen enthalten.
1. Beispiele der Unordered List mit Bullets
Beispieldarstellungen von (X)HTMLDokumenten, bei denen der UL-Tag nicht per CSS mit dem Attribut list-style-type versehen wurde. Klicken Sie bitte auf die Thumbnails um die die Screenshots jeweils im Original zu sehen.
1.1. Mit Doctype HTML 4.01 Strict
Leider seltenst anzutreffen - und auch nicht bei uns (-; - aber hier die Ansichten zu folgender Beispiel-Seite mit der durchaus erstrebenswerten Doctype-Definition:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1.2. Mit Doctype XHTML 1.0 Strict
Leider noch seltener zu entdecken - und wieder auch nicht bei uns (-; : Ansichten zu folgender Beispiel-Seite mit der wohl für die meisten Webdesigns utopische Doctype-Definition nebst korrekter Angabe des Mime-Headers:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
1.3. Ohne Angabe des Doctypes
Transitional oder ohne Doctype. Beide sind eigentlich die Regelfälle. Wohl meistens deshalb, weil selbst die Entwickler von Content Management Systemen oder Templates sich nicht sicher sind, welchen Doctype Sie angeben sollen und schließlich gestatten transitionale Doctype-Angaben eine leichtere Validierbarkeit von HTML-Dokumenten beim W3C. Toll!
Beim folgenden Dokument führen beide Wege zum gleichen Ergebnis. Der Vollständigkeiter halber sei der folgendende tranistionale HTML 4.01 Doctype erwähnt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Man beachte bitte den Umstand, daß die Renderengine des Firefox Gecko in der Fallstudie ohne Angabe von Doctype Strict keine Scheiben sondern Rauten darstellt.
2. Beispiele der Unordered List mit Squares
Analog zu unserem Bullet-Beispiel folgen hier noch Darstellungen von (X)HTMLDokumenten, bei denen am UL-Tag das CSS-Attribut list-style-type mit «square» definiert wurde.
2.1. Squares mit Doctype HTML 4.01 Strict
Ansichten folgender Beispiel-Seite:
2.2. Squares mit Doctype XHTML 1.0 Strict
Ansichten folgender Beispiel-Seite:
2.3. Squares ohne Angabe des Doctypes
Beim folgenden Dokument fallen besonders die unterschiedlichen Größen der Squares auf.
Fazit
Die Rendertests dieser kleinen Expedition zu den Enkeln von SGML fanden nur auf Windows XP Professional und unter Ausschluß anderer Doctype-Varianten statt. Wie sich wohl jeder vorstellen kann, wird ein Webdesign, dessen Layout auf unterschiedlichen Konfigurationen einheitlich dargestellt werden und solchen Qualitätsrichtlinien entsprichen soll, nicht gerade billig.
Es gibt durchaus Menschen, die sich noch daran erinnern können, wie Kunden mit Pantonefächern wedelnd und Maßband / Tesafilm bewaffnet die Bemassungen grafischer Arbeiten am (Röhren-) Monitor kontrollierten. In einer bestimmten Liga nimmt die Wahrscheinlichkeit dramatisch zu, daß gelieferte Designs beim Kunden solche Qualitätskontrollen bestehen müssen.
Wer mehr zum Thema Doctypes wissen will, sollte sich mal bei folgenden Dokument von Matthias Gutfeldt ansehen, wie Webbrowser mit Doctypes umgehen.
6. Juni 2007 - 11:50 | Webprogrammierung » Browserwars | ∞ | Spacedrops
