Fusionality

Heute wäre mir fast (aber eben nur fast) das sprichwörtliche Latein ausgegangen.

Die Aufgabe:
Eine Liste mit Teasertext und einem "mehr…"-Link am Ende. Die gesamte Liste soll bei Mouseover gehighlited werden, allerdings soll nur der "mehr…"-Button aktiv sein. So soll es dann aussehen:

Kinderspiel, dachte ich. Ich muss ja, laut Auftraggeber, keine Rücksicht auf den IE 6 nehmen. Also kann ich ja gemütlich mit li:hover arbeiten, das kann der IE ja seit Version 7. Hier also das XHTML dazu:

<ul>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
</ul>

Dazu passend das CSS:

#content ul{
list-style-image:url(Bilder/list-point.jpg);
margin-left:16px;
}

#content li{
margin-bottom:15px;
margin-top:15px;
line-height:20px;
padding:0 5px;
height:20px;
}

#content li:hover{
background:#eb7305;
color:#fff;
}

#content li a{
float:right;
text-decoration:none;
color:#fff;
}

Und jetzt wird es komplizierter:
Im Firefox 3.5 und IE 8 wird es, wie auf dem Screenshot, korrekt dargestellt. Der Firefox 3.0 hingegen packt das "mehr…" in eine neue Zeile, unterhalb des Listeneintrages. Der IE 7 verhält sich, ausnahmsweise, wie der Firefox 3.0.

Also dem IE 7 folgendes "untergejubelt":

* + html #content li a{
margin-top:-20px;
}

Aber was mache ich jetzt mit dem Firefox 3.0? Google kennt zwar einen CSS Hack für den Firefox 3.0, aber der ist a) kein valides CSS und b) betrifft auch den Firefox 3.5. Ich möchte ihn aber trotzdem erwähnen:

html>/**/body #content li a, x:-moz-any-link, x:default {
float:right;
text-decoration:none;
color:#fff;
margin-top:-20px;
}

Es muss aber auch mit validem CSS gehen. Die Lösung brachte der CSS Selector Test auf CSS3 Info:

#content li a{
float:right;
text-decoration:none;
color:#fff;
margin-top:-20px;
}

#content li a:only-of-type {
margin-top:0px;
}

Also den margin-top "normal" zugewiesen und über :only-of-type wieder zurück deklariert.Den CSS3 Pseudoselektor :only-of-type versteht der Firefox 3.0 nämlich nicht, der 3.5er schon. Doch die Freude war von kurzer Dauer, denn der IE 8 kennt den auch nicht.

Zurück zu CSS3 Info und checken, was der IE8 nicht kann, der Firefox 3.0 aber und hier greifen könnte. :only-child klingt doch gut. Alles zusammen gestückelt mit Kommentaren:

#content ul{
list-style-image:url(Bilder/list-point.jpg);
margin-left:16px;
}

#content li{
margin-bottom:15px;
margin-top:15px;
line-height:20px;
padding:0 5px;
height:20px;
}

#content li:hover{
background:#eb7305;
color:#fff;
}

#content li a{
float:right;
text-decoration:none;
color:#fff; //Hier können wir den margin nicht deklarieren, da sonst auch der IE8 davon betroffen wäre
}

#content li a:only-child{
margin-top:-20px; // Den Selektor kennt der IE 8 nicht, der FF 3.0 schon
}
#content li a:only-of-type {
margin-top:0px; //Und wieder zurück. Diesen kennt der FF 3.5, der IE kennt ihn weder in Version 7 noch 8
}

* + html #content li a
margin-top:-20px; // Der gute alte StarHack für IE7
}

Und genau sowas macht den Unterschied zu den ganzen "Ich-klick-mir-eine-Homepage-zusammen"-Tools vom Nachbarsjunge ;)

Damit eine Website mit JavaScript als XHTML validiert muss das JavaScript einfach nur als CDATA deklariert werden:

<script type="text/javascript">
/* <![CDATA[ */
alert('So validiert das Dokument');
/* ]]> */
</script>

Um die Standardspalten Link, Normal, Rechts und Rand individuell zu benennen, oder weitere Spalten anzulegen, muss man die Datei typo3conf/extTables.php editieren:

Und in der Datei typo3conf/localconf.php folgende Zeile einfügen:

Jeder Webdesigner/Webentwickler kennt die Tücken und Macken des Internet Explorers, speziell der Version 6. Das CSS muss also entsprechend angepasst werden. Hierfür werden leider oft obskure CSS Anweisungen verwendet:

Der Internet Explorer führt diese Anweisung aus und setzt die Breite auf 150px, allerdings sind solche Konstrukte natürlich alles andere als valides CSS.
Doch es geht auch valide:

Viele Webentwickler erstellen Websites mittlerweile in XHTML und das ist auch gut so. Allerdings gibt es hier eine fiese Falle!

Der XML Prolog:

Dieser steht vor dem eigentlichen DOCTYPE und definiert die XML Version, sowie die Zeichensatzkodierung. Allerdings versetzt dieser Prolog den Internet Explorer 6 in den "Quirks Mode" und den Internet Explorer 7 in den "Almost Standard" Modus! Und was das heißt weiß wohl jeder Webentwickler…

Da der XML Prolog nicht zwingend vorgeschrieben ist, empfiehlt es sich ihn weg zu lassen.

Eine Übersicht aller DOCTYPE / Modus Kombinationen gibt es hier.