Padding bei hover

[Stefan Kremer]

Hallo,

verzweifelt suche ich Hilfe für folgendes Problem:
Ich habe ein Navigationsmenü mit Hover-Effekt (andere Hintergrundgrafik). Nun möchte ich beim Hover auch noch den Text vor der Hintergrundgrafik einen Pixel nach rechts und einen nach unten verschieben, damit ein 3d-Effekt entsteht.

In CSS sieht das so aus:

ul#nav li a {
        background-image: url(images/Menu-1.gif);
        font-size: 12px;
        line-height: 21px;
        height: 21px;
        display:block;
        color:#444444;
        text-decoration: none;
        font-weight: bold;
        border: 0px solid #666666;
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-top-color: #fff;
        cursor: hand;
}

ul#nav li a span {
        height: 21px;
        text-indent: 5px;
        display:block;
        margin-left: 5px;
}

ul#nav li a:hover {
        background-image: url(images/Menu-2.gif);
}

ul#nav li a:hover span {
        color:#000000;
        padding-top: 1px;
        padding-left: 1px;
}

Die beiden letzten Zeilen sind entscheidend für das Verschieben des Textes. Im Firefox klappt das wunderbar, im IE ignoriert er das einfach. Kann der IE kein Padding in einem span? Mit text-indent klappts auch nicht, oder mit position: relative; top: 1px etc. Das alles versteht nur der Firefox...

Der Aufruf auf der html-Seite ist folgender:

<table width=150 border=0 cellpadding=0>
  <tr height=100%>
    <td>
      <div style="width:150px;">
        <ul id="nav">     <li><a href="Aktuelles.htm" target="Hauptframe"><span>Aktuelles</span></a></li></ul>
      </div>
    </td>
  </tr>
</table>

Hat jemand eine Idee oder einen Lösungsansatz? Zur Verdeutlichung könnt Ihr Euch das Navigationsmenü auf meiner Webseite anschauen. Im Firefox ist es 3d, im IE nicht, sprich der Buttontext bleibt auf beim Hovern da wo er vorher war.

[Kalle_B]

Hallo,

Kann der IE kein Padding in einem span?

Ein span ist im Textfluss, und ein Wort kann eigentlich nicht wie ein Block verschoben werden.

Ist ja nett, dass der FF das macht, der macht vieles, ist dafür aber auch langsamer (jedenfalls bei großen Seiten).

Wenn du verschieben willst, solltest du es mal mit einem Blockelement testen:
  display:block;

Keine Ahnung, ob es geht, nur so eine Idee.

Kalle

[Stefan Kremer]

Wie so oft im Leben: man tüftelt stundenlang, gibt entnervt auf, ruft nach Hilfe und kurze Zeit später findet man selbst die Lösung:

ul#nav li a:hover {
        background-image: url(images/Menu-2.gif);
        padding-left: 1px;
}

ul#nav li a:hover span {
        color:#000000;
        display:block;
        position:relative; top: 1px;
}

So funktionierts in beiden Browsern. Fragt mich nicht warum, es geht einfach. Danke trotzdem für Eure Aufmerksamkeit!

Stefan