Hallo Forum,

ich verzweifel schon wieder an dieser blöden Crossbrowser-Kompalität. IE6 stellt es wie gewünscht dar, FF 3 und Opera 9.62 nicht, wobei ich nicht einschätzen kann, welcher es nun W3C-Konform und nach CSS 2.1 "richtig" darstellt.

Fehlerquelle ist sind die Pseudoklassen :link :visited :focus :active sowie der :hover. Mit deren Hilfe lasse ich 2 verscheidene Hintergrundbilder anzeigen für einen Hover-Effekt, der sonst nur mit Javascript zu machen ist.

Im "Normalzustand" (link, visited, focus, active) hat der Link ein abgedunkeltes Hintergrundbild. Bei "Hover" wechselt das Bild dann zum "erkennbaren" Hintergrundbild. Zu sehen (nur mit IE6) ist das auf dieser Homepage

Das funktioniert, wie gesagt, im IE einwandfrei. Allerdings werden die Hintergrundbilder bei FF und Opera unten "abgeschnitten" - es sind nur ca 15 Pixel vom oberen Rand zu sehen?!?!? Alle Höhen- und Breitenangaben werden ignoriert - ich weiß nicht mehr weiter. ://

Hier das verwendete CSS:

td.sal_1 a:link, td.sal_1 a:visited, td.sal_1 a:focus, td.sal_1 a:active {  
        background: url('../../../media/salon/th_bild06_low.jpg') no-repeat top left;  
}  
td.sal_1 a:hover {  
        background: url('../../../media/salon/th_bild06_high.jpg') no-repeat top left;  
}  
  
td.sal_2 a:link, td.sal_2 a:visited, td.sal_2 a:focus, td.sal_2 a:active {  
        background: url('../../../media/salon/th_bild07_low.jpg') no-repeat top left;  
}  
td.sal_2 a:hover {  
        background: url('../../../media/salon/th_bild07_high.jpg') no-repeat top left;  
}  
  
td.sal_3 a:link, td.sal_3 a:visited, td.sal_3 a:focus, td.sal_3 a:active {  
        background: url('../../../media/salon/th_bild08_low.jpg') no-repeat top left;  
}  
td.sal_3 a:hover {  
        background: url('../../../media/salon/th_bild08_high.jpg') no-repeat top left;  
}  
  
td.sal_4 a:link, td.sal_4 a:visited, td.sal_4 a:focus, td.sal_4 a:active {  
        background: url('../../../media/salon/th_bild09_low.jpg') no-repeat top left;  
}  
td.sal_4 a:hover {  
        background: url('../../../media/salon/th_bild09_high.jpg') no-repeat top left;  
}  
  
td.sal_5 a:link, td.sal_5 a:visited, td.sal_5 a:focus, td.sal_5 a:active{  
        background: url('../../../media/salon/th_bild10_low.jpg') no-repeat top left;  
}  
td.sal_5 a:hover {  
        background: url('../../../media/salon/th_bild10_high.jpg') no-repeat top left;  
}

Und noch der betreffende Teil des HTML:

 <table border="0" width="495">  
  <tbody>  
    <tr>  
      <td class="sal_1">  
        <a href="media/salon/bild06.jpg"><img src="media/salon/dummy.gif" border="0" alt="Unser Salon" title="Unser Salon" width="107px" height="80px" /></a>  
      </td>  
      <td class="sal_2">  
        <a href="media/salon/bild07.jpg"><img src="media/salon/dummy.gif" border="0" alt="Unser Salon" title="Unser Salon" width="107px" height="80px" /></a>  
      </td>  
      <td class="sal_3">  
        <a href="media/salon/bild08.jpg"><img src="media/salon/dummy.gif" border="0" alt="Unser Salon" title="Unser Salon" width="107px" height="80px" /></a>  
      </td>  
      <td class="sal_4">  
        <a href="media/salon/bild09.jpg"><img src="media/salon/dummy.gif" border="0" alt="Unser Salon" title="Unser Salon" width="107px" height="80px" /></a>  
      </td>  
      <td class="sal_5">  
        <a href="media/salon/bild10.jpg"><img src="media/salon/dummy.gif" border="0" alt="Unser Salon" title="Unser Salon" width="107px" height="80px" /></a>  
      </td>  
    </tr>  
  </tbody>  
</table>  

"dummy.gif" ist ein transparentes Bild mit 1 Pixel, dass auf die erforderliche Größe gezogen wird.

Hat jemand einen Tipp, was da falsch läuft?

Vielen Dank im voraus!

MfG
Cross