So nachdem ich nu zwei Stunden getestet hab, bin ich durch mit der Sache. Ergebnis :first-letter in die Tonne treten.
Sauber lässt es sich in der Tat nur auf Absätze und Überschriften anwenden. Links und Span werden komplett ignoriert in beiden Browsern.
Auf li legen führt beim FF zu Nebenwirkungen beim hovern (ohne die Pseudoklasse zu benutzen verschwindet das Format des ersten Buchstabens).
Lässt man jedoch zwischen Klassennamen und Pseudoklasse ein Leerzeichen, verschwindet dieser Effekt. (wird dann aber in beiden Browser FF und IE6 korrekt angezeigt)
Will man den im Menü befindlichen Links zusätzlich noch die Pseudoklasse :hover zuweisen, führt das im IE6 wiederum zu Fehlern.
Hier mein Testcase:
Zum Online nachvollziehen:
Klick
Und noch das HTML+CSS
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title> :first-letter TESTCASE</title>
<style type="text/css">
.test:first-letter { font-size:30px; color:red; }
/*Für den FF ein Leerzeichen zwischen dem Klassennamen und der Pseudoklasse */
.testmitleer :first-letter { font-size:30px; color:red; }
/* Probleme beim hovern im IE bei dieser Variante */
.testmitleerhover li a{ color:black; border-top: 3px solid white; border-bottom:3px solid white; }
.testmitleerhover li a:hover { color: black; border-top: 3px solid black; border-bottom:3px solid black;}
.testmitleerhover :first-letter { font-size:30px; color:red; }
</style>
</head>
<body>
<h1 class="test">Überschrift</h1>
<p class="test">Paragraph</p>
<a class="test">Link</a>
<p><span class="test">Span</span></p>
<ul class="kaplet">
<li class="test"><a href="#">Link-Liste mit ul und li :first-letter</a></li>
</ul>
<ul>
<li class="test"><a href="#">Link-Liste nur li :first-letter</a></li>
</ul>
<ul class="test">
<li><a href="#">Link-Liste nur ul :first-letter</a></li>
</ul>
<ul class="testmitleer">
<li><a href="#">Link-Liste nur ul :first-letter mit Leerzeichen zwischen Klassenname und Pseudoklasse</a></li>
</ul>
<ul class="testmitleerhover">
<li><a href="#">Link-Liste nur ul :first-letter mit Leerzeichen zwischen Klassenname und Pseudoklasse und :hover auf a</a></li>
</ul>
</body>
</html>
Man beachte den Effekt beim hovern bei den ersten zwei Listen im FF.
Ne ne ne so kann ich nich arbeiten
