Mathias Kemper: a:hover und Textausrichtung

Hallo zusammen,

Ich habe ein Problem mit der Textpositionierung in einer Tabelle im Zusammenhang mit a:hover.
Folgendes möchte ich erreichen:
Eine Tabelle, deren Zellenhintergünde einen blauen Button enthalten (alle den selben). Darüber wird eine Schrift gelegt die individuell ist.
Fährt man mit der Maus über die einzelnen Zellen, soll der Button grau werden und die Beschriftung in rot angezeigt werden.
Ich habe dazu 2 gleich große Buttons erstellt, einen in blau und den anderen in grau.
Die CSS-Definitionen nemhe ich in einer externen Datei vor, die in jeder Menu-Seite eingebunden wird.

Funktioniert soweit:
Bei normaler Schriftgröße (keine Auswahl von Überschriften oder so), wird ja der Text aus dem Body-Tag und der Schift die unter a:link definiert ist, kombiniert.
Der Zelleninhalt wird auch mit dem blauen Btton als Hintergrund und schwarzem Text in Arial angezeigt.
Fahre ich nun mit der Maus über die Zelle, wechselt der Hintergrund auf den grauen Button und die Schrift auf rot.
Soweit ja ganz toll.
Nun habe ich einige Beschriftungen die in 12er Schrift zu groß sind.
Wenn ich diese nun in 10er Schrift eingebe (einfach die Schriftgröße auf 10 setzen ohne sonst was zu verändern), schaut das in 'normaler' Ansicht auch gut aus.
Fahre ich aber nun mit der Maus über die Zelle, wechselt der Hintergrund auf den grauen Button, die Schrift wird rot, ABER: Sie rutscht nach oben, steht also vertikal nicht mehr in der Mitte der Zelle.

Hier die Definition des Body-Tags:

body
{
 font-family:Arial,Verdana,Helvetica;
 font-size:12pt;
 margin-top:0;
 margin-bottom:0;
 color:#C0C0C0;
}

und die Definition der Links:

a:link
{
 color:#000000;
 font-weight:bold;
 text-decoration:none;
}

a:visited
{
 color:#000000;
 font-weight:bold;
 text-decoration:none;
}

a:hover
{
 color:#FF0000;
 font-weight:bold;
 vertical-align:bottom;
 background-image:url('b_sc33_inv.gif'); width:100px; height:20px;
}

a:active
{
 color:#000000;
 font-weight:bold;
 text-decoration:none;
}

Die Tabelle schaut so aus:

table
{
 border=0px none;
 cellpadding="0";
 cellspacing="5";
 style="border-collapse collapse";
}

td
{
 width:100px;
 height:20px;
 background-image:url('b_sc33.gif');
}

HIIILFEE.... Wie kann ich das vermeiden ?
Habe schon alles mögliche an Positionierungen ausprobiert, aber wahrscheinlich habe ich irgendwo was übersehen.

Gruß und schonmal danke für die Hilfe...

Mathias

  1. Hallo Mathias,

    [...]

    ist es wirklich notwendig, die gleiche Anfrage innerhalb von Minuten
    in mehreren Foren zu stellen?Natürlich erhöht sich für DICH die Antwortwahrscheinlichkeit, aber
    es ist ein Unding gegenüber den Helfenden. Die wissen i.d.R. nicht,
    dass diese Anfrage auch noch zeitgleich woanders schon "bearbeitet"
    wird oder wurde und verschwenden praktisch ihre Zeit.

    Bitte entscheide Dich in Zukunft, in welchem Forum Du postest, wenn
    dort dann Deine Frage nicht beantwortet werden konnte, kannst Du ja
    immernoch in einem anderen Forum nachfragen, allerdings bitte erst
    nach einigen Tagen und nicht Minuten!

    Viele Grüße,
    Stefan

    1. Moin Stefan,

      ist es wirklich notwendig, die gleiche Anfrage innerhalb von Minuten
      in mehreren Foren zu stellen?

      2 Foren....

      Sorry, Entschuldigung, wie kann ich es wieder gut machen ? Nimmste auch Kreditkarten ?

      Das Forum hier konnte ich in den letzten Tagen nicht erreichen,
      sonst hätte ich gleich hier nachgefragt...

      Gruß
      Mathias