nicht angemeldet
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