first-letter CSS Menü - Teil 2/2
Wie im ersten Teil beschrieben scheiterte die Methode mit :first-letter leider wegen dem IE. Wobei ich nicht behaupten will das der IE das Attribut falsch interpretiert. Der IE zeigt nur das Pseudo-Element in Zusammenhang mit der background-color Eigenschaft falsch an. Wobei man auch da immer noch nicht sagen kann das er es falsch interpretiert da die Hintergrundfarbe ja schließlich schwarz ist, sieht nur schlecht aus 
Nach weiteren Versuchen mit :first-letter beschloss ich dann doch schweren Herzens den ersten Buchstaben in einen eigenen Tag zu packen. Somit konnte ich den ersten Buchstaben ohne Probleme mit CSS formatieren. Zusätzlich hab ich das ganze Menü noch in einen DIV Container gesteckt, schadet nie ;).
Als Test hab ich zusätzlich noch ein vertikales Menü erstellt das nur mit einer geringen Anpassung des CSS Codes möglich ist. Im :hover wird noch die Hintergrundfarbe geändert, sieht imho gar nicht schlecht aus.
HTML-Code
CSS-Code
div#navi {
margin:0px;
padding:0px;
width:800px;
}
div#navi ul {
margin:0px;
padding:0px;
}
div#navi ul li {
margin:0px;
padding:0px;
float:left;
color:black;
width:160px;
border:1px solid black;
list-style-type:none;
}
div#navi ul li a span {
margin:0px;
padding:0px;
background-color:black;
color:#FF7E28;
}
div#navi ul li a {
background-color:white;
display:block;
width:100%;
font-family:'courier new';
font-weight:bold;
color:black;
text-decoration:none;
}
div#navi ul li a:hover {
background-color:white;
color:#FF7E28;
}
Getestet wurde das Menü mit Mozilla FireFox 1.0.2, Opera 8 Beta und Internet Explorer 6 (XP SP2)
Den ersten Buchstaben in einen extra Tag zu packen ist äußerst umständlich und auf keinen Fall eine schöne Lösung. Falls mir mal wieder danach ist werde ich weiter an einer Lösung mit :first-letter arbeiten, oder zumindest an einem einfacheren Weg.