Szenario

Man möchte ein Navigationsmenü erstellen. Die Links im Menü sollen dabei aussehen und funktionieren wie Buttons.
Man hat also ungefähr folgendes Markup:

<ul id="siteNav">
  <li><a href="#org">Organisatorisches</a></li>
  <li><a href="#proj">Projekte</a></li>
  <li><a href="#tech">Technisches</a></li>
</ul>

(Die Trennung von Markup und Layout ist schon was tolles…)

Und möchte dieses Markup mit folgendem CSS stylen:

#siteNav{list-style:none;width:150px;
  position:absolute;top:7em;left:25px;
  margin:0;padding:0;}
#siteNav[id]{position:fixed;}
#siteNav li{margin-bottom:1em;}
#siteNav li a{display:block;
  padding:2px 7px;border:1px solid #aaa;}
#siteNav li a:hover{background-color:#369;color:#fff;}

Dann funktioniert das schonmal nicht im IE.

Lösung

Es sind mehrere interessante Sachen:

1. Die vertikalen Abstände zwischen den einzelnen Buttons sind bei Opera und IE unterschiedlich (IE macht größere Abstände). Wenn man das width:150px; in das li zieht, sind die Abstände gleich. Keine Ahnung, wie das zusammenhängen könnte.
2. Die Links reagieren im IE erst, wenn der Mauszeiger auf dem Text ist. Wenn man zusätzlich zum display:block;, das eigentlich schon reichen sollte (ein Blocklevelelement füllt die Breite des Elternelements), ein width:100%; einfügt, funktionieren die Buttons auch im IE (und in Opera, und im Firefox).

Also sieht das CSS jetzt so aus:

#siteNav{list-style:none;
  position:absolute;top:7em;left:25px;
  margin:0;padding:0;}
#siteNav[id]{position:fixed;}
#siteNav li{margin-bottom:1em;width:150px;}
#siteNav li a{display:block;width:100%;
  padding:2px 7px;border:1px solid #aaa;}
#siteNav li a:hover{background-color:#369;color:#fff;}

Fertig!

Ein Beispiel dieser Technik findet sich auf meiner Holonen-Seite.

Nachtrag

Ich habe gerade festgestellt, wenn man das width für’s a verwendet, funktionierts auch und man hat weniger Code:

#siteNav{list-style:none;
  position:absolute;top:7em;left:25px;
  margin:0;padding:0;}
#siteNav[id]{position:fixed;}
#siteNav li{margin-bottom:1em;}
#siteNav li a{display:block;width:150px;
  padding:2px 7px;border:1px solid #aaa;}
#siteNav li a:hover{background-color:#369;color:#fff;}

So, jetzt aber!

Verwandte Artikel

• XTHML strict-konformes Öffnen in neuem Fenster (0)
• XSL-Stylesheets und Namensräume (0)
• XML erweitert TCP (0)
• XHTML, Pseudocoolnes und Trennung von Struktur und Präsentation (0)
• Wrapping oder, wie man aus statischen Seiten dynamische macht… (0)
• Webseitenmachen – das kann doch jeder! (2)
• Web 2.0 … The Machine is Us/ing Us (5)
• Warum Favicons unabdingbar sind… (1)