nicht angemeldet
Vertical-Align will nicht
Hallo,
ich bastel grad an einer Tabelle (ja, es handelt sich um Tabellarische Daten) welche ich mit CSS formatieren möchte. Ich möchte, dass der link im <td> über die komplette höhe der Zelle klickbar ist, das bekomme ich auch noch hin, allerdings ist der Text immer oben ausgerichtet, ich hätte ihn aber gerne mittig (in der Vertikalen).
Das vertical-align:bottom (habe ich testhalber gewählt damit es besser auffällt) wird aber in FireFox, IE7, Safari4 ignoriert.
Habe hier mal ein Beispiel zusammen gebaut wie es derzeit aussieht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Untitled Document</title>
<style type="text/css">
td {
font-family:Arial;
font-size: 12px;
color:#7F7D74;
background-color:#CCC951
vertical-align:bottom;
border: thin solid;
}
a.menu:link, a.menu:visited, a.menu:active {
text-decoration:none;
font-size: 18px;
color:#7F7D74;
background-color:#CCC951;
display:block;
vertical-align:bottom;
height:100px;
padding:5px;
}
a.menu:hover {
color:#3F3E3E;
background-color:#DEDA59;
}
</style></head>
<body bgcolor="#FFFFFF">
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr><td><a href="#" class="menu">zum klicken</a></td>
<td><img src="http://www.google.de/intl/de_de/images/logo.gif"></td>
</tr></table>
</body></html>
Ich wüsste jetzt gern woran das liegt. Danke schonmal im voraus.
-
Yerf!
Ich wüsste jetzt gern woran das liegt. Danke schonmal im voraus.
vertical-align wirkt nur bei Tabellenzellen und Inline-Elementen. An der Tabellenzelle kann es bei dir keine Wirkung haben, da der Link die volle Höhe der Zelle einnimmt. Am Link selbst wirkt es nicht, da dieser auf display:block steht (wie hier stattdessen ein display:inline-block wirkt weis ich grad nicht).
Du könntest mal probieren die line-height des Links zu vergrößern, das sollte den Text nach unten verschieben.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->