Tabellenhintergrund

[Helmut]

Also ich habe folgendes Problem.
Meine Navigation soll sehr dynamisch werden und für die Rollover habe ich deshalb gif bilder mit transparenz gewählt und der Hintergrund soll sich mit css verändern. Das will ich machen damit nicht so viele Bilder geladen werden müssen.
das klappt auch soweit..allerdings nur beim internet explorer...
Beim Mozilla-Browser und bei Opera wird nur die hälfte des td tags indem sich das jeweilige gif befindet eingefärbt...woran könnte das liegen ??

Am besten ich kopiere hier auch mal den quellcodeausschnitt rein zum besseren Nachvollziehen.

css-Teil:
a.navi:link {background-color:#ffffff;}
a.navi:visited {background-color:#ffffff;}
a.navi:hover {background-color:#000000;
a.navi:active {background-color:#000000;}

html-Teil:
<tr><td height="25"><a class=navi href="#"><img src="kontakt.gif" width="118" height="25" border="0" alt="kontakt" hspace="0" vspace="0"></a></td></tr>

[Sönke Tesch]

Meine Navigation soll sehr dynamisch werden und für die Rollover habe ich deshalb gif bilder mit transparenz gewählt und der Hintergrund soll sich mit css verändern. Das will ich machen damit nicht so viele Bilder geladen werden müssen.
das klappt auch soweit..allerdings nur beim internet explorer...

Wenn etwas CSS-iges nur im IE klappt, dann kannst Du beinahe unter Garantie davon ausgehen, der der IE es falsch macht. Das ist leider so.

Beim Mozilla-Browser und bei Opera wird nur die hälfte des td tags indem sich das jeweilige gif befindet eingefärbt...woran könnte das liegen ??

a.navi:link {background-color:#ffffff;}

<tr><td height="25"><a class=navi href="#"><img src="kontakt.gif" width="118" height="25" border="0" alt="kontakt" hspace="0" vspace="0"></a></td></tr>

Schau Dir Deinen Code nochmal genau an: Welches Element soll die Hintergrundfarbe ändern? Das ist doch wohl der Verweis. Der Verweis besteht aus dem Bild. Insofern mußt Du Dich nicht wundern, daß nur das Bild seine Hintergrundfarbe ändert und der Rest der Tabellenzelle, in dem sich (Deiner Aussage nach) kein Bild befindet, nicht - denn die Zelle gehört schlicht und ergreifend nicht zum Verweis.

IE macht's falsch, Mozilla und Opera richtig. qed

Gruß,
  soenk.e

[MichelM]

Hallo,»» Also ich habe folgendes Problem.

Meine Navigation soll sehr dynamisch werden und für die Rollover habe ich deshalb gif bilder mit transparenz gewählt und der Hintergrund soll sich mit css verändern. Das will ich machen damit nicht so viele Bilder geladen werden müssen.
das klappt auch soweit..allerdings nur beim internet explorer...
Beim Mozilla-Browser und bei Opera wird nur die hälfte des td tags indem sich das jeweilige gif befindet eingefärbt...woran könnte das liegen ??

Am besten ich kopiere hier auch mal den quellcodeausschnitt rein zum besseren Nachvollziehen.

css-Teil:

a.navi:link .linkz{background-color:#ffffff;}
a.navi:visited .linkz{background-color:#ffffff;}
 a.navi:hover .linkz{background-color:#000000;
 a.navi:active .linkz{background-color:#000000;}

html-Teil:

<tr><td class="linkz" height="25"><a class=navi href="#"> <img src="kontakt.gif" width="118" height="25" border="0" alt="kontakt" hspace="0" vspace="0"> </a></td></tr>

versuchs mal damit.

Mehr dazu unter http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htm
Danke vielmal ;-)

Michael

[Axel Richter]

Hallo,

css-Teil:
a.navi:link .linkz{background-color:#ffffff;}
a.navi:visited .linkz{background-color:#ffffff;}
 a.navi:hover .linkz{background-color:#000000;
 a.navi:active .linkz{background-color:#000000;}

html-Teil:
<tr><td class="linkz" height="25"><a class=navi href="#"> <img src="kontakt.gif" width="118" height="25" border="0" alt="kontakt" hspace="0" vspace="0"> </a></td></tr>

versuchs mal damit.

Was soll das bringen? Das Element mit der Klasse "linkz", also die td,  müsste _innerhalb_ des a-Tags stehen, damit a.navi:link .linkz irgendwelche Auswirkungen hätte. Das geht aber wiederum nicht, da innerhalb von a-Tags _nur_ Inline-Elemente stehen dürfen.

Meiner Meinung nach dürfte es nur gehen, wie gewollt, wenn das a-Element sich als Block mit Breite 100% darstellt.

a.navi {display:block; width:100%;}
a.navi:link {background-color:#ffffff;}
a.navi:visited {background-color:#ffffff;}
a.navi:hover {background-color:#000000;
a.navi:active {background-color:#000000;}
...
<tr><td><a class="navi" href="#"><img src="kontakt.gif" width="118" height="25" border="0" alt="kontakt" style="margin:0; padding:0;"></a></td></tr>

Hinweis: Das height-Attribut im td ist falsch und überflüssig, da die Zellenhöhe durch die Höhe der Grafik bestimmt wird. Statt vspace und hspace nimm lieber CSS und margin und padding für die Browser, die nicht genau wissen, was der Unterschied zwischen margin und padding ist.

Gruß

Axel

[MichelM]

Hallo,

oops - stimmt Fehler von mir !

Habe aber auf den selfaktuell-Artikel hingewiesen, so ist also nachvollziehbar was ich empfehlen wollte.

Danke vielmal ;-)

Michael