Hintergundbilder nur teilweise sichtbar

[cross]

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

[Gunnar Bittersmann]

@@cross:

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.

Wann immer sich die Frage stellt: die Antwort lautet (meist) FF und Opera.

Zu sehen (nur mit IE6) […]

Nein, der IE 7 begeht denselben Fehler: Er wendet die 'height'-Eigenschaft auf Inline-Elemente an. [CSS2 §10.5]

Mach aus den 'a' Blockelemente. [CSS2 §9.2.5]

Live long and prosper,
Gunnar

[cross]

Mach aus den 'a' Blockelemente. [CSS2 §9.2.5]

Hi Gunnar,

das war's - VIELEN DANK! :))

Gruß
cross

[molily]

Nein, der IE 7 begeht denselben Fehler: Er wendet die 'height'-Eigenschaft auf Inline-Elemente an.

Ja, aber nur im mit IE 5 kompatiblen Quirks-Modus.

Mathias

[Gunnar Bittersmann]

@@cross:

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

Layouttabelle? Pfui!

Frei nach wahsaga: "Ich möchte furchtbar gern eine Liste sein, bitte bitte lass mich doch ...!!!1"

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

Was soll der Unsinn? Binde dort die tatsächen Bilder ein – und nicht als Hintergrundbild!

Live long and prosper,
Gunnar