Barrierefreier Button mit Text Replacement
Jeder kommt früher oder später beim Bauen einer Website in die Situation, dass er die Beschriftung eines Buttons loswerden möchte, um den Button mit einer schönen Grafik zu versehen. Das Auge surft schließlich mit.
Oftmals sieht man in diesen Fällen, dass das value-Attribut einfach leer gelassen wird. Dies ist allerdings eine wenig elegante Lösung, da Besucher mit Screenreader raten müssen, wofür der Button gedacht ist. Alternativ könnte man auf die Standard-Text-Replacement-Methode über text-indent: -9999px; zurückgreifen. Dies funktioniert auch ganz passabel in mordernen Browsern. IE6 und IE7 schieben dabei allerdings den kompletten Button nach links ins Abseits.
Es muss also eine andere Methode her. Und die sieht so aus, dass man einfach ein div-Element um den Button packt und ihm die gleiche Größe wie dem Button gibt. Dann verschiebt man selbigen noch mittels padding-top ins Abseits und schon ist der Text weg und man kann seine Grafik einbauen. Der Quelltext dafür sieht folgendermaßen aus:
HTML
<div class="button">
<input type="submit" value="Absenden" />
</div>
Dazu kommen noch folgende CSS-Angaben:
CSS
.button {
height: 30px;
width: 80px;
overflow: hidden;
}
input {
width: 80px;
height: 30px;
padding: 30px 0 0 0;
border: 0;
background: #369 url('button.jpg') 0 0 no-repeat;
}
Diese Technik funktioniert einwandfrei im Firefox, in Safari sowie im IE6/7/8.
Natürlich kann man den gleichen Effekt erzielen, indem man einem input-Element das Attribut type="image" gibt und die Grafik direkt im Quelltext einbaut. Allerdings hat man dann nicht die Möglichkeit, für den :hover- und :active-Zustand eine alternative Grafik per CSS zuzuweisen, was der User Experience durchaus zuträglich ist.
PS: Wie ihr input-Elemente im IE6 :hover-fähig macht, erfahrt ihr hier.
Nachtrag:
Thorsten hat mich in den Kommentaren darauf aufmerksam gemacht, dass diese Lösung im Opera-Browser nicht funktioniert, da sich dort die Button-Beschriftung nicht durch padding ins Abseits schieben lässt. Hier müssen wir also mit der üblichen Text Replacement-Methode mittels der CSS-Angabe text-indent: -9999px; ran.
Allerdings hat der Internet Explorer wie oben beschrieben seine Schwierigkeiten mit dieser Lösung und verschiebt den kompletten Button ins Abseits, was sicherlich nicht im Sinne des Erfinders ist. Wir müssen den Internet Explorer also ausschließen, was auf zwei Arten Möglich ist.
1. Über herkömmliche Conditional Tags:
HTML/CSS
<!--[if !IE]>
<style type="text/css">
input {
text-indent: -9999px;
}
</style>
<![endif]-->
Dies ist die Standard-Abfrage, ob es sich beim Browser um einen Internet Explorer handelt oder nicht. Diesen -Schnipsel fügt man in den Kopf-Bereich ein und schon sieht der Button auch im Opera-Browser anständig aus.
2. Ergänzung im type-Attribut:
Ergänzt man das type-Attribut des style-Elements um die mit Apostroph abgegrenzte Angabe charset=utf-8, interpretiert der Internet Explorer die Angabe nicht mehr. Trotzdem ist das Dokument weiterhin valide.
HTML/CSS
<style type="text/css;charset=utf-8">
input {
text-indent: -9999px;
}
</style>
Welche Lösung ihr wählt, sei euch überlassen. Eine Empfehlung, welche besser ist, kann ich nicht abgeben.
Name des Autors zu post_class() in WordPress hinzufügen
Ein Freund kam neulich auf mich zu fragte mich, wie er die Beiträge seines Blogs optisch trennen kann, je nachdem, welcher Autor den Beitrag geschrieben hat. Ich sagte, das sei ganz einfach und nahm — optmistisch, wie ich bin — an, die WordPress-Funktion post_class() würde u.a. auch den Namen des Autors als Klasse ausgeben. Dem ist jedoch nicht so.
Man kann den Namen des Autors aber ganz schnell mit folgendem PHP-Code hinzufügen:
PHP/HTML
<?php $curauth = get_userdata(intval($post->post_author)); ?>
<div <?php post_class($curauth->user_login) ?>>
Nun erscheint der Autorenname in der Klasse des Beitrags-div und man kann die einzelnen Posts ganz bequem per CSS optisch anpassen.
Bilder mit jQuery einblenden, wenn sie fertig geladen sind
Das hier ist zwar eher im Bereich "Spielerei" anzusiedeln, aber dennoch recht nützlich. Schließlich sieht es einfach eleganter aus, wenn die Bilder eingeblendet werden, wenn sie fertig geladen sind. Außerdem sehen die Besucher nicht den alternativen Text des Bildes, sondern das kleine, sich drehende Rädchen, bei dem heutzutage (fast) jeder weiß, dass gerade etwas in Arbeit ist.
Los geht es mit dem HTML-Teil:
HTML
<div class="wrap">
<h1>Bilder einblenden mit jQuery</h1>
<div class="image_frame">
<a href="http://www.flickr.com/photos/herschel_r/3226358452/">
<img src="http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg" width="240" height="160" class="image" alt="" />
</a>
</div>
</div>
Der Übersichtlichkeit halber habe ich hier nur ein Bild eingebunden, und nicht sechs, wie in der Demo. Man kann allerdings so viele Bilder einbinden, wie man möchte. Der Aufbau ist ziemlich simpel: Ein <div>-Tag zum Aufspannen des Inhaltsbereiches und jeweils eins pro Bild.
Kommen wir nun zum jQuery-Teil:
Javascript
var loader = "<img src=\"load.gif\" class=\"load\" alt=\"Lädt…\" />";
$(document).ready(function() {
$('.image').hide();
$('.image_frame').append(loader);
$(window).load( function() {
$('.load').hide();
$('.image').fadeIn('slow');
});
});
Als erstes speichern wir das Ladebildchen in der Variable loader. Man könnte das auch direkt in den HTML-Teil setzen, aber da gehört es meiner Meinung nach nicht hin. Danach verstecken wir das eigentliche Bild mit dem Befehl $('.image').hide(); und binden das Ladebildchen mit dem Befehl $('.image_frame').append(loader); ein. Nun kommt die Funktion, die das Ladebildchen verschwinden lässt, sobald das eigentliche Bild fertig geladen ist und dieses behutsam einblendet. Das wars auch schon.
Zum Schluss brauchen wir noch eine Portion CSS, damit das ganze auch so aussieht wie in der Demo:
CSS
.wrap {
width: 556px;
padding: 30px 0 0 30px;
margin: 0 auto;
clear: left;
}
h1 {
margin-bottom: 30px;
}
.image_frame {
position: relative;
width: 246px;
height: 166px;
margin: 0 30px 30px 0;
float: left;
display: inline;
border: 1px solid #EEE;
}
.image_frame img {
padding: 1px;
border: 2px solid #EEE;
}
.image_frame a:hover img {
padding: 1px;
border: 2px solid #CCC;
}
img.load {
position: absolute;
width: 32px;
height: 32px;
top: 67px;
left: 107px;
border: 0;
}
Das ganze kann man ganz nach seinen Bedürfnissen anpassen. Wichtig ist nur, dass die Angabe position: relative bei der Klasse .image_frame stehen bleibt, damit sich das Ladebildchen innerhalb des dazu gehörenden <div>-Tags absolut positionieren lässt. Und falls euch das Ladebildchen nicht so zusagt, findet ihr auf Ajaxload.info Alternativen.
Ansonsten bitte ich wie immer, bei Fragen oder Anregungen die Kommentarfunktion zu nutzen.
Navigation im Googlemail-Style mit jQuery
Wer Googlemail benutzt, kennt sicherlich die Buttons mit dem Grauverlauf und den abgerundeten Ecken, die jedoch ohne eine Grafik auskommen. So etwas kann man relativ schnell selber machen, man muss nur genug HTML-Tags "in den Topf werfen". In diesem Tutorial zeige ich euch, wie ihr das mithilfe von jQuery bewerkstelligen könnt. jQuery deshalb, weil man einfach HTML-Tags hinzufügen kann und der eigentliche Quelltext schön sauber bleibt.
Und wenn wir schon beim Thema sind, fangen wir am besten mit dem Quelltext an. Dieser sieht so aus:
HTML
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Contact</a></li>
</ul>
Eine schlanke, ungeordnete Liste, wie es sich gehört. Allerdings brauchen wir nun ein Element, um die abgerundeten Ecken darzustellen, zwei weitere Elemente um den Grauverlauf zu bilden, und nochmal zwei Elemente um die geprägte Schrift auf den Buttons hinzubekommen.
Summa sumarum müssen also 5 Tags hinzugefügt werden, um den grafischen Effekt hinzubekommen. Deshalb auch die Javascript-Lösung, da bspw. Suchmaschinen-Bots oder Menschen an Screen-Readern nichts mit dieser Fülle an HTML-Elementen anfangen können.
Hier nun die benötigten Javascript-Angaben:
Javascript
$(document).ready(function() {
var start = "<span class=\"layer_1\"><span class=\"layer_2\"></span><span class=\"layer_3\"></span><span class=\"layer_4\">";
var middle = "</span><span class=\"layer_5\">";
var end = "</span></span>";
var item = new Array();
$('.navigation li a').each( function() {
item.push(this.innerHTML);
for ( i = 0; i < item.length; i++ ) {
$(this).html(start + item[i] + middle + item[i] + end);
}
});
});
Als erstes werden die benötigten Elemente — in diesem Fall <span>-Tags — in Variablen gespeichert. Danach werden die jeweiligen Beschriftungen der Listen-Elemente in einem Array gespeichert. Zum Schluss wird alles zusammengefügt. Nun fehlen nur noch die entsprechenden Styles, um die Buttons fertig zu machen. Diese gestalten sich wie folgt:
CSS
body {
padding: 100px;
font: normal 12px Helvetica;
font-weight: bold;
background-color: #FFF;
}
.navigation {
height: 20px;
padding: 1px 0;
clear: left;
list-style: none;
}
.navigation li {
position: relative;
width: 82px;
height: 20px;
margin: 0 10px 0 0;
float: left;
display: inline;
}
a, span {
display: block;
text-decoration: none;
}
a:focus {
outline: none;
}
a:link, a:visited {
width: 82px;
height: 20px;
position: relative;
background-color: #DDD;
text-align: center;
line-height: 20px;
color: #333;
z-index: 100;
overflow: visible;
}
a:hover {
background-color: #999;
color: #000;
}
.layer_1 {
width: 80px;
height: 20px;
position: absolute;
top: -1px;
left: 1px;
border: 0;
border: 1px solid #DDD;
border-left: 0;
border-right: 0;
background-color: #F9F9F9;
overflow: hidden;
z-index: 200;
}
a:hover .layer_1 {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
.layer_2 {
width: 80px;
height: 2px;
position: absolute;
top: 10px;
left: 0;
background-color: #EEE;
z-index: 300;
}
a:active .layer_2 {
top: 8px;
left: 0;
}
.layer_3 {
width: 80px;
height: 8px;
position: absolute;
top: 12px;
left: 0;
background-color: #E3E3E3;
z-index: 300;
}
a:active .layer_3 {
top: 0;
left: 0;
}
.layer_4 {
width: 80px;
height: 12px;
position: absolute;
top: 5px;
left: 0;
line-height: 12px;
color: #FFF;
text-align: center;
z-index: 400;
}
.layer_5 {
width: 80px;
height: 12px;
position: absolute;
top: 4px;
left: 0;
line-height: 12px;
color: #777;
text-align: center;
z-index: 500;
}
a:hover .layer_5 {
color: #333;
}
Zugegeben, das ist ein ganz schöner Rattenschwanz an CSS-Angaben, aber es lohnt sich. layer_1 ist höher als das <a>-Tag und ragt oben und unten darüber hinaus. Dadurch bekommen wir die abgerundeten Ecken. layer_2 und layer_3 sind leer und erzeugen den Grauverlauf. layer_4 und layer_5 beinhalten die Beschriftung des Buttons und erzeugen den Eindruck geprägter Buchstaben, indem das untere Layer weiße Schrift und einen Offset von einem Pixel in der y-Achse hat.
Das ganze funktioniert im Internet Explorer 6-8, im Firefox, in Opera und in Safari. Andere Browser habe ich nicht getestet, allerdings sollte es mit keinem modernen Browser Probleme geben.
Für Anmerkungen nutzt bitte die Kommentarfunktion, ich freue mich immer über Anregungen und konstruktive Kritik. Solltet ihr noch keine Erfahrungen mit jQuery gemacht haben, empfehle ich euch das Einsteiger-Tutorial in den "Weiterführenden Links".
Weiterführende Links:
Ressourcen-sparende Navigation in WordPress
Normalerweise baut man die Navigation in WordPress mit der Funktion wp_list_pages() (mehr auf WordPress Codex), so dass man im Backend Seiten anlegen kann und diese dynamisch im Frontend erscheinen. Dadurch ist es für Nutzer möglich, jedes beliebige Theme zu laden und trotzdem eine vollständige Navigation zu haben, ohne dass sie im Quelltext rumwerkeln müssen.
Allerdings sind damit eine Menge Abfragen verbunden, die die Ladezeit der Seite erhöhen. Baut man sich ein eigenes Theme und weiß, welche Seiten man anlegen möchte, sollte man ernsthaft darüber nachdenken, auf wp_list_pages() zu verzichten und die Navigation selbst in statischem HTML mithilfe einer ungeordneten Liste zu bauen.
Blöderweise muss man dabei auf das von wp_list_pages() zur Verfügung gestellte Navigation Highlighting verzichten. Dabei wird dem li-Tag des Navigationspunktes der Seite, auf der man sich gerade befindet, die Klasse current_page_item hinzugefügt, so dass man die Möglichkeit hat, diesen Punkt per CSS hervorzuheben.
Hier kommt jedoch die neue WordPress-Funktion body_class() ins Spiel. Diese fügt dem body-Tag u.a. den Name der aktuellen Seite als Klasse hinzu. Der HTML-Teil einer Navigation kann dann bspw. so aussehen:
PHP/HTML
<body <?php body_class() ?>>
…
<ul class="navigation">
<li class="home_nav"><a href="#">Home</a></li>
<li class="leistungen_nav"><a href="#">Leistungen</a></li>
<li class="referenzen_nav"><a href="#">Referenzen</a></li>
</ul>
…
</body>
Den Pfad zur Seite müsst ihr natürlich ins href-Attribut des a-Tags eintragen. Ansonsten trifft hier der Titel der Seite in der body-Klasse auf die Klasse des zur Seite gehörenden li-Tags. Das kann man sich zunutze machen und zwar mit folgenden CSS-Angaben:
CSS
.home li.home_nav a:link,
.home li.home_nav a:visited,
.leistungen li.leistungen_nav a:link,
.leistungen li.leistungen_nav a:visited,
.referenzen li.referenzen_nav a:link,
.referenzen li.referenzen_nav a:visited {
color: #FFF;
background-color: #369;
text-decoration: underline;
}
.home li.home_nav a:hover,
.leistungen li.leistungen_nav a:hover,
.referenzen li.referenzen_nav a:hover {
color: #FFF;
background-color: #666;
text-decoration: underline;
}
Natürlich muss man noch den Normalzustand der Navigation definieren, aber ansonsten ist das Navigation Highlighting fertig. Alles mit einer(!) dymischen Komponente — der body_class()-Funktion —, also schön schlank.
Weiterführende Links:
Fancy Login-/Logout-Button für deinen WordPress-Blog
Hier habe ich ein kleines Tutorial, wie ihr in euren WordPress-Blog einen schicken Login-/Logout-Button einbaut. Dafür nutzen wir die WordPress-eigene Funktion wp_loginout(), die Abfrage is_user_logged_in() und die Text Replacement-Technik mithilfe von CSS
Vorweg eine kleine Demo.
Und nun los:
Die Funktion wp_loginout() generiert, je nachdem, ob der User eingeloggt ist oder nicht, automatisch einen Anmelden- bzw. Abmelden-Link. Um mit der Text Replacement-Technik darauf zugreifen zu können, müssen wir jedoch dem umschließenden <p>-Tag eine Klasse abhängig vom User-Status zuweisen. Das ist der Punkt, wo die Abfrage is_user_logged_in() ins Spiel kommt.
Der Code sieht folgendermaßen aus:
PHP/HTML
<?php if ( is_user_logged_in() ) : ?>
<p class="logout">
<?php else : ?>
<p class="login">
<?php endif; wp_loginout(); ?>
</p>
Ist der User angemeldet, bekommt das <p>-Tag die Klasse "logout" und der Logout-Button wird angezeigt, ist der User nicht angemeldet, bekommt das <p>-Tag die Klasse "login" und der Login-Button wird angezeigt.
Nun kommen die Styles hinzu, um den schicken Button, anstatt des schnöden Text-Links anzuzeigen:
CSS
.login,
.logout {
width: 100px;
height: 60px;
text-indent: -9999px;
overflow: hidden;
}
.login a,
.logout a {
display: block;
width: auto;
height: 60px;
background-image: url('loginout.jpg');
background-repeat: no-repeat;
}
.login a:link,
.login a:visited { background-position: 0 0 }
.login a:hover { background-position: 0 -60px }
.login a:active { background-position: 0 -120px }
.logout a:link,
.logout a:visited { background-position: -100px 0 }
.logout a:hover { background-position: -100px -60px }
.logout a:active { background-position: -100px -120px }
Per text-indent: -9999px wird der Text-Link nach links ins Abseits verschoben und zurück bleibt die Grafik. Diese sieht wie folgt aus:
Per background-position wird je nach Zustand der richtige Button angezeigt. Ihr könnt die Grafik gerne übernehmen, oder einfach was eigenes entwerfen, was besser in euren Blog passt.
Wenn ihr dieses Tutorial hilfreich fandet, würde ich mich freuen, wenn ihr auf Twitter darauf aufmerksam macht oder es beim Bookmark-Service eures Vertrauens speichtert.
Vielen Dank.
Weiterführende Links:
Wie man dem Internet Explorer 6 Herr wird
Der IE6 kann zurecht als Schmutzfleck auf dem Browser-Markt bezeichnet werden. Und hartnäckig ist er obendrein auch, jedenfalls solange auf den Firmenrechnern der Welt Windows XP läuft. Und solange dies so ist, muss man beim Erstellen einer Website darauf Rücksicht nehmen. Allerdings muss Cross-Browser-Kompabilität auch in Zeiten des Internet Explorer 6 kein Grund sein, sich graue Haare stehen zu lassen.
Jedenfalls nicht, solange man "nur" einfache Seiten in HTML/CSS schreibt. Es gibt lediglich ein paar Dinge, auf die man achten muss, und schon sieht die Welt gleich viel freundlicher aus.
- Weg mit der XML-Deklaration!
- Den "Double-Margin-Bug" unterbinden
- Das "hasLayout-Konzept" berücksichtigen
- hr-Tags immer umschließen
- "text-align: center" für zentrierte Layouts
- Die :hover-Pseudoklasse für alle Elemente verfügbar machen
- Finger weg von Attribut-Selektoren
- Vorsicht bei Hover-Effekten in Verbindung mit Hintergrund-Grafiken
- "iepngfix" für PNGs mit Alpha-Transparenz
- Fazit
Weg mit der XML-Deklaration!
Solange euer HTML-Dokument mit der Zeile <?xml version="1.0" encoding="utf-8"?> anfängt, fällt der IE6 in den Quirks-Modus und das Box-Modell wird falsch berechnet. Das hat zur Folge, dass margin-, padding- und border-Angaben im Stylesheet nicht mit in die Breite bzw. Höhe eines Block-Elements einfließen.
Den "Double-Margin-Bug" unterbinden
Weist man einem Block-Element die Eigenschaft float: left zu, verdoppelt der IE6 den Außenabstand nach links. Analog läuft es mit float: right. Dies kann einem jedes Layout verhageln. Unterbinden lässt sich dies, indem man dem gefloateten Element die Eigenschaft display: inline zuweist. Klingt absurd, hilft aber.
Das "hasLayout-Konzept" berücksichtigen
hasLayout ist eine proprietäre Eigenschaft von Microsoft und kann true oder false sein. Viele Darstellungsfelder im IE6 gehen auf diesen Eigenschaft zurück. Man geht also auf Nummer Sicher, wenn man mit width-Angaben im Stylesheet nicht knausert, wodurch das Element auf hasLayout = true gesetzt wird.
hr-Tags immer umschließen
hr-Elemente haben im IE6 immer einen Rand, daher muss man sie mit div-Tags umschließen und das hr-Tag selbst im Stylesheet auf display: none setzen.
HTML
<div class="hr">
<hr />
</div>
CSS
.hr {
/* hier das styling */
}
.hr hr {
display: none
}
"text-align: center" für zentrierte Layouts
Will man sein Layout zentrieren, so wie ich das hier gemacht habe, weist man dem Inhaltscontainer einfach im Stylesheet die Eigenschaft margin: 0 auto zu und schon sitzt das Ding mittig. Außer natürlich im IE6.
Hier gibt es allerdings einen schönen Workaround: Einfach dem body-Tag text-align: center zuweisen, dadurch wird der Inhaltscontainer zentriert. Dem Inhaltscontainer wiederum weist ihr die eigentliche, auf der Website gewünschte Textausrichtung zu.
CSS
body {
text-align: center
}
#wrap {
text-align: left
}
Die :hover-Pseudoklasse für alle Elemente verfügbar machen
:hover ist eine sogenannte Pseudoklasse und funktioniert im IE6 nur in Verbindung mit dem a-Element. Dies kann nervig sein, wenn man z.B. einen Button mit einem Hover-Effekt versehen möchte, was der Benutzbarkeit einer Website ja durchaus zuträglich sein kann.
Für diesen Fall empfiehlt sich der "Whatever:hover"-Hack. Sobald dieser eingebunden ist, kann man die :hover-Klasse auf alle Elemente anwenden.
Achtung: Funktioniert nur bei aktiviertem JavaScript!
Finger weg von Attribut-Selektoren
Mit Attribut-Selektoren hat man bspw. die Möglichkeit einzelne input-Elemente in einem Formular über input[type=text] oder input[type=submit] anzusprechen und zu stylen. Eine tolle Einrichtung in CSS, die im Internet Explorer 6 leider nicht funktioniert. Man kommt also nicht umhin, althergebrache ID's oder Klassen zu vergeben, wenn man diese Elemente ansprechen möchte.
Vorsicht bei Hover-Effekten in Verbindung mit Hintergrund-Grafiken
Besonders bei Hover-Effekten empfiehlt es sich eigentlich, auf sogenannte CSS-Sprites zurück zu greifen, um Verzögerungen beim Laden der Hover-Grafik zu vermeiden. CSS-Sprites bedeutet, dass man alle Grafiken in eine Datei steckt und beim Hover-Effekt keine neue Grafik lädt, sondern lediglich die Hintergrundposition des CSS-Sprites ändert.
Eine geniale Lösung - außer für den IE6. Dieser speichert Grafiken nicht im Cache, so dass die große CSS-Sprite-Grafik jedes mal neu geladen werden muss, was den Hover-Effekt noch holperiger als bei der Standard-Lösung macht. Das bedeutet, dass man für den IE6 ein Extra-Stylesheet anlegen muss, in dem man die Hover-Effekte auf althergebrachte Weise mit Einzelgrafiken definiert.
"iepngfix" für PNGs mit Alpha-Transparenz
Der IE6 unterstützt von Hause aus keine Alpha-Transparenz bei PNGs, weshalb der eigentlich transparente Bereich in einem "dekorativen" grau erstrahlt. Allerdings ist das kein Grund zu verzagen, gibt es doch den "iepngfix". Diesen - genauso wie den "Whatever:hover"-Hack - in die Website einbinden, und schon bereiten PNGs keine Probleme mehr.
Achtung: Funktioniert nur bei aktiviertem JavaScript!
Fazit
Berücksichtigt man diese Dinge, kann man schon von Vornherein eine Menge Unheil verhindern, ohne dass man von Beginn an seine Zeit mit dem IE6 verschwendet. Ich als Apple-User baue meine Seite komplett im Firefox und erst zum Schluss schmeiße ich "Parallels Desktop" an und begutachte die Seite im Internet Explorer. Klingt mutig, ist aber kein Problem, wenn man den IE6 von Anfang an im Hinterkopf hat.
Sollte ich etwas wichtiges vergessen haben, bin ich über einen Hinweis in den Kommentaren dankbar. Ansonsten wünsche ich weiterhin viel Spaß(?) beim Arbeiten mit dem Internet Explorer 6.
PS: Auch interessant ist der Beitrag über den Umgang mit dem IE6 von Dirk Jesse.
