Padding wird ignoriert

[Peter Kolb]

Hallo, folgendes Problem:

Ich habe in einer Tabelle einen einfachen Hovereffekt, der mit Padding den Text verschieben soll:

CCS-Datei:

table{border-collapse:collapse;font-family: Tahoma; font-size:12px; color:#000000;width:160px;}
table.menue td{border-style:solid;border-width:1px;border-color:#5D8840;background-color:#A8CC90;padding:5px;}
table.menue a:hover{color:#000000;padding:1px;}

HTML-Datei:

<table class="menue">
  <tr>
    <td><a href="start.htm">Startseite</a></td>
  </tr>
[...]

Seltsamerweise klappt das auch teilweise, denn bei Mouseover wird der Text um 1px nach links verschoben - aber eben nur nach links und nicht auch nach unten

Benutze ich stattdessen padding-left und padding-top, passiert das gleiche. Auch das entfernen der 5px-Padding in der Grunddefinition hilft nix...

[Moses]

Hallo!

Ich habe in einer Tabelle einen einfachen Hovereffekt, der mit Padding den Text verschieben soll:

table.menue a:hover{color:#000000;padding:1px;}

Seltsamerweise klappt das auch teilweise, denn bei Mouseover wird der Text um 1px nach links verschoben - aber eben nur nach links und nicht auch nach unten

Ich vermute die Ursache entweder darin liegt, dass bei inline-Elementen (wie a) die Berechnung der Höhe auf line-height und nicht auf height basiert, oder darin, dass die Höhe eines Elements letztlich irgendwo mit der Zeilenhöhe verschränkt ist.
Wie das nun genau zusammenhängt, konnte ich bis jetzt aber nicht rauslesen. Die CSS-Dokumentation schweigt sich in diesem Punkt irgendwie aus (oder ich habe etwas übersehen); Erwähnung finden in 10.6.1 eh nur margin-top und -bottom (welche aber wie padding auch nicht wie erwartet reagieren).

Tatsache ist allerdings, dass vertikale padding-Werte mit hover funktionieren: Du kannst das sehen, wenn du deinem a (ohne hover) einen Rahmen verpasst. Sobald du mit der Maus über das Element fährst, vergrößert er sich wegen der neuen padding-Dimensionen. Da allerdings der Text an derselben vertikalen Position bleibt, sieht es ohne Rahmen so aus, als wenn sich überhaupt nichts tut.

Da es sich meiner Meinung nach entweder um ein Spezifikationsproblem oder einen Browserfehler handelt, gibt es Abhilfe für dein Prolem wohl nur, wenn du aus a mittels display:block ein block-Element macht. Bei Menüeinträgen dürfte das aber akzeptabel sein.

Grüße, Moses