TD :hover und :active Effekt mit CSS

[karoshi]

Hallo Liebe Helfer,

ich habe vor den Hintergrund meines <tds> beim :hover und :active in einer anderen Hintergrundfarbe erscheinen zu lassen. Das klappt auch super....
nur habe ich folgendes Problem:
Die in den einzelnen tds enthaltenen Links kriege ich auf biegen und brechen nicht vertikal zentriert.

Vielleicht hat jemand eine Lösung für mich parat bevor ich mir weiterhin die Finger breche.


Folgend mein Quellcode:

<center>
<table width="800" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td width="800" bgcolor="#e5e5e5">
      <table border="0" cellpadding="0" cellspacing="0">
         <tr>
            <td valign="middle"><a href="index.html" onfocus="blur()" class="tds">Home</a></td>
	<td><img src="img/clear_w.gif" width="1" height="22" alt="" border="0"></td>
	<td><a href="index.html" onfocus="blur()" class="tds">Home</a></td>
	<td><img src="img/clear_w.gif" width="1" height="22" alt="" border="0"></td>

        </tr>
</table>
</td>
</tr>
	<tr>
	<td><img src="img/clear.gif" width="1" height="9" alt="" border="0"></td>
	</tr>

</table>

</center>

die css datei

a	{
		font-family: Arial,Helvetica,Sans-Serif;
		font-size: 9pt;
		font-weight: normal;
		color: #000000;
		text-decoration: none;
		padding-left: 10px;
		padding-right: 20px;
		vertical-align: middle;	
	  }


.tds:link, .tds:visited	{
		display:block;
		height: 22px;
		background: #e5e5e5;
	  }
	  
.tds:hover, .tds:active	{
		display:block;
		height: 22px;
		background: #ffcc0c;
	  }

Ich freue mich natürlich über jeden Tipp

Gruss

[webmichl]

...Die in den einzelnen tds enthaltenen Links kriege ich auf biegen und brechen nicht vertikal zentriert....

Bei einzeiligen Texten funktioniert das einwandfrei mit einer Line-Height-Angabe:

.tds:link, .tds:visited    {
        display:block;
        height: 22px; line-height: 22px;
        background: #e5e5e5;
      }

[zulujaner]

vertical-align funktioniert noch besser ;-)

den td, vertical-align:middle; zuweisen.

Schaust du hier...

Nicht von den vielen roten Warnungen beeindrucken lassen.
Wichtig ist nur die letzte Zeile - gaaanz unten.

Grüße zulujaner

[karoshi]

danke für eure schnellen antworten.
mit line-height lässt sich das super zentrieren, 1000 dank lieber webmichl.

und....zulujaner, sobald die display: box; zum einsatz kommt funktioniert das mit dem vertical-align nicht mehr...warum auch immer.

gruss
karoshi

[zulujaner]

Wenn du das hier meinst: display:block;

Dann gehts nicht mehr das stimmt. Das vertical-align geht nur mit inline Elementen, was du durch das block aufhebst.

[karoshi]

genau zulu ... meinte die display:block; ....box ist natürlich quatsch! hab mich etwas verhaspelt...

gruss