ganze zelle verlinken

[xony]

Hallo Forum,

ich hab ein kleines Problem und noch keine richtige Lösung gefunden.
Ich möchte per css eine komplette zelle verlinken.

Bisher hab ich es nur geschafft das die komplette Zelle die Farbe wechselt beim Mousover.

Ich Arbeite mit einer externen Stylesheet. Vielen Dank füre eure Hilfe.

 

[Fabian H]

Du könntest folgenden Link benutzen:

<td><a href="ziel.html" style="display:block;">Lnk</a></td>

 

[xony]

danke, aber leider passiert nix.

 

[Fabian H]

Sorry, hab vergessen, dass der IE zu schlecht ist, um das da oben richtig anzuzeigen...

<td><a href="foo.html" style="display:block:width:100%;">Link</a></td>

So sollte es auch der IE richtig machen.

 

[xony]

Also ich danke Dir wirklich, vielleicht hab ich auch was übersehen, aber es passiert nix.
Hier einmal main Quellcode für den Button:

td.normal 
{ 
width:100%; 
height:18px; 
background-color:#ccc; 
border-width:1px; 
border-style:solid; 
border-color:#ccc; 
font-family:Tahoma, Verdana; 
font-size:11px; 
color:#fff; 
padding-left:11px; 
style-DISPLAY: block  width:100%;

cursor:hand; 
} 

td.hover 
{ 
width:100%; 
height:18px; 
background-color:#999; 
border-width:1px; 
border-style:solid; 
border-color:#999; 
font-family:Tahoma, Verdana; 
font-size:11px; 
color:#fff; 
text-align:left; 
padding-left:11px;
style-DISPLAY: block  width:100%;
 
cursor:hand; 

}

Vielleicht mach ich ja was Verkehrt.

 

[Fabian H]

Nein, ich glaub, du hast da was falsch verstanden.

Nicht die Tabellenzelle muss diese CSS Eigenschaften haben, sondern der Link,
der in der Zelle ist.

Also diese Zeile hier raus:

style-DISPLAY: block  width:100%;

Und stattdessen z.B. so dem Link zuweisen:

td a {
  display: block;
  width: 100%;
}

 

[xony]

mHHHHH Komisch Komisch:

Hier mal der komplette Quellcode der css und der HTML Ausgabe:

CSS:

td.normal
{
display: block;
width:100%;
height:18px;
background-color:#ccc;
border-width:1px;
border-style:solid;
border-color:#ccc;
font-family:Tahoma, Verdana;
font-size:11px;
color:#fff;
padding-left:11px;


cursor:hand;
}

td.hover
{
display: block;
width:100%;
height:18px;
background-color:#999;
border-width:1px;
border-style:solid;
border-color:#999;
font-family:Tahoma, Verdana;
font-size:11px;
color:#fff;
text-align:left;
padding-left:11px;


cursor:hand;

}


Und hier die HTML Ausgabe:

<tr>
<td class="normal"
onMouseOver="this.className='hover';"
onMouseOut="this.className='normal';"> &nbsp;<img src="images/bullet.gif" border="0"><a href="<?php echo tep_href_link(FILENAME_DEFAULT);?>" style="display:block:width:100%;">Home</a>
</td>
</tr>


Leider geht nix, nur wenn man auf den Textlink klickt .

 

[xony]

OK jetzt klappt es.
Allerdings sobald ich eine Grafik vor den Link setze (siehe Quellcode oben) verschiebt es sich um eine Zeile.
Ohne Grafik funktioniert es einwandfrei.