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 ;)
Hier mal meine Version:
<style>
body{font-family:verdana;font-size:0.8em;}
ul{list-style-type:none;list-style-image:url(list-point.jpg);margin-left:16px;width:300px;}
ul li{margin:15px 0;line-height:20px;padding:0 5px;height:20px;position:relative;}
ul li:hover,ul li.active{background:#eb7305;color:#fff;}
ul li a{position:absolute;top:0;right:5px;height:20px;line-height:20px;text-decoration:none;color:#fff;}
</style>
<ul>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
<li class="active">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>
Zu sehen unter: http://browsershots.org/http://www.seraph-design.de/_css-list/
bzw http://www.seraph-design.de/_css-list/
ich muss dich leider enttäuschen! Deine Version funktioniert weder im IE7, noch im IE8. Auf den Screenshots von Browsershots sieht man nur den Aktiv-Zustand ;)
Glaube mir, ich hätte nicht so einen Aufwand betrieben, wenn es anders auch möglich gewesen wäre.
wie auch immer, so müsste dein markup eigtl. aussehen (ungetestet):
<!doctype html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>claus-gieseke.de</title>
<style type="text/css">
* { margin:0; padding:0; }
body {font: 13px/16px sans-serif;}
ul { list-style-type: none; padding: 20px;}
ul.fixed { width: 300px; }
ul.fluid { max-width: 800px; }
ul li { display: block; margin-bottom: 10px; overflow: hidden; position: relative; width: 100%; } /* overflow: hidden == clear: both, need width for ie6 */
ul a { display: none; text-align: right; position: absolute; top: 0; right: 0; }
ul li:hover { background: #ccc; }
ul li:hover a { display: block; }
ul div { margin-right: 70px; white-space: nowrap; overflow: hidden; } /* margin-right == width of link */
</style>
</head>
<body>
<ul class="fixed">
<li><div>Lorem ipsum dolor</div><a href="#">» mehr...</a></li>
<li><div>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</div><a href="#">» mehr...</a></li>
<li><div>Lorem ipsum dolor</div><a href="#">» mehr...</a></li>
</ul>
<ul class="fluid">
<li><div>Lorem ipsum dolor</div><a href="#">» mehr...</a></li>
<li><div>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</div><a href="#">» mehr...</a></li>
<li><div>Lorem ipsum dolor</div><a href="#">» mehr...</a></li>
</ul>
</body>
</html>
nein, so müsste mein Markup eben nicht aussehen. Ich produzier sicher keine div-Suppe.
Versteh mich nicht falsch,ich nehme gerne Kritik und Verbesserungsvorschläge entgegen. Aber eine Liste mit unnötigen divs aufzublähen ist sicher keine bessere Lösung.
Ein kompliziertes CSS interessiert keinen, eine div-Suppe hingegen beeinträchtigt z.B. Screenreader.