[sTikKen]

Als Neuling im Forum entschuldige ich mich erstmal für den seltsamen Betreff den wahrscheinlich niemand versteht, aber mir ist leider keine bessere Beschreibung eingefallen^^

Mein Problem ist folgendes, habe ein Navigationsmenu:

<div class="nav">
        <ul>
          <li><a href="#">Link 1</a></li>  //A
          <li><a href="#"></a></li>        //B
          <li><a href="#">&nbsp;</a></li>  //C
          .....

dazu eine CSS Datei in der unter anderem folgendes steht:

.nav ul li {
...
background: url("../img/button.png");
...
}

  .nav ul li a:focus,
  .nav ul li a:hover,
  .nav ul li a:active  { 
background: url("../img/button_hover.png"); 
outline: 0 none; 
text-decoration: none;
}

Nun funktionierte das auch ganz gut, wenn der Link wie oben im HTML Code mit A gekennzeichnet aussah. Irgendwann kam ich auf die Idee keine Textlinks mehr zu nehmen, sondern auch die Schrift auf die Grafik zu pappen.
Das führt uns zu B, ein <a> ohne Inhalt, das hover ging nun nicht mehr.
Als Workaround hab ich dann C eingefügt, ein $nbsp; und die css datei noch um text-decoration:none; erweitert, damit der User von dem &nbsp; nichts mitbekommt.
Aber diese Lösung gefällt mir nicht, sie funktioniert zwar, aber das kann ja so nicht gedacht gewesen sein?!

[heiko_rs]

In FAQ 15 findest Du eine passende Variante.