IE Bug bei Links mit Hintergrundbild in einer Tabelle

[Nina]

Hallöchen,
ich habe einen Bug im IE entdeckt (glaube ich zumindest);-)
Folgender Code (stark vereinfacht):
<table>
 <tr>
  <td>
   <a href="#">
    <p style="background-image:url('img/printpreview_a.gif'); background-repeat:no-repeat; padding-left:20px;<!-- wegen der bildbreite-->">link1</p>
   </a>
  </td>
  <td>
   <a href="#">
    <p style="background-image:url('img/printpreview_a.gif'); background-repeat:no-repeat; padding-left:20px;<!-- wegen der bildbreite-->">link1</p>
   </a>
  </td>
 </tr>
</table>

Es sind 2 Tabellenzellen, in denen das absolut gleiche steht. es ist jeweils ein link mit einem hintergrundbild und einem padding von 20px damit das bild vor dem text erscheint.

Problem:
wenn man in zelle 1 mit der maus über das bild fährt verändert sich der mauszeiger zur hand und man kann darauf klicken. das ist ok.

bei der zweiten zelle wird das bild irgendwie nicht in den link mit eingebunden. der mauszeiger bleibt im normalen zustand.

ich hab das ganze im NN7 getestet und es funktioniert wunderbar.
gibt es für dieses problem vielleicht einen workaround?

für jede hilfe bin ich dankbar.
grüssle

Nina

[Cheatah]

Hi,

<a href="#">
    <p [...]>link1</p>
   </a>

wenn dieser Code zu keinem vernünftigen Verhalten führt, ist das keinesfalls ein Bug im Client. Verlasse Dich niemals auf eine Fehlerkorrektur.

Cheatah

[MatzeA]

Servus Cheatah,

da warst Du mal wieder schneller *grummel.
Aber folgender Link dürfte der Posterin helfen.

http://selfhtml.teamone.de

Grus Matze

[Nina]

http://selfhtml.teamone.de

und wo finde ich hier genau die hilfe? Das ist ziemlich umfangreich;-)

[MatzeA]

Servus,

dann such mal nach anker als Stichwort und lies mal das Kapitel zu
CSS.
Schaden tut es aber auch nicht das ganze Buch gelesen zu haben.
Dort gibt es auch ein angeblich sehr gutes und umfangreiches Tutorial zu HTML.

Gruss Matze

[Nina]

wenn dieser Code zu keinem vernünftigen Verhalten führt, ist das keinesfalls ein Bug im Client. Verlasse Dich niemals auf eine Fehlerkorrektur.

Tut mir leid, ich verstehe leider nicht was Du damit meinst. Welche Fehlerkorrektur?

[Cheatah]

Hi,

Tut mir leid, ich verstehe leider nicht was Du damit meinst. Welche Fehlerkorrektur?

die des Browsers, die aus dem ungültigen HTML ein gültiges zu machen versucht. Du hast ein Blocklevel-Element[1] in ein Inline-Element[1] geschachtelt - das geht _nie_.

Cheatah

[1] Jeweils aus HTML-Sicht. Die CSS-Sicht ist für gültiges HTML unerheblich.

[Nina]

Du hast ein Blocklevel-Element[1] in ein Inline-Element[1] geschachtelt - das geht _nie_.

sehr guter Einwand, habe ich total übersehen und stimme Dir voll und ganz zu.
wieso funktioniert es dann in der ersten zelle?

[Cheatah]

Hi,

wieso funktioniert es dann in der ersten zelle?

frage nie nach Seiteneffekten von Fehlerkorrekturen. Es gibt keinen logischen Grund.

Cheatah

[Nina]

noch kurz ne Erklärung warum ich da mit Hintergrundbildern arbeite:

Ich konnte die 20x20 Pixel Breiten Bilder nicht vernünftig mit dem Text dahinter anordnen.

Ich wollte, vertical-align:middle anwenden, funktioniert aber nicht.

[Cheatah]

Hi,

Ich konnte die 20x20 Pixel Breiten Bilder nicht vernünftig mit dem Text dahinter anordnen.

hast Du es mit float versucht?

Ich wollte, vertical-align:middle anwenden, funktioniert aber nicht.

http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align:
"Applies to: inline-level and 'table-cell' elements"

Cheatah

[Nina]

hast Du es mit float versucht?

ja, hab ich bereits gemaht. ich schau mir mal den link an den Du mir geschickt hast. vielleicht ist da was dabei.

[Cheatah]

Hi,

hast Du es mit float versucht?
ja, hab ich bereits gemaht.

mit der richtigen HTML-Struktur?

Cheatah

[Nina]

hab's geschafft!!

einfach das <a> tag in das <p> tag hineine, und die formatierung auf das <a> tag anwenden!! mensch...so was aber auh;-)

<p>
  <a style="background-image:url('img/printpreview_a.gif'); background-repeat:no-repeat; padding-left:20px;" href="#">link1</a>
</p>

Vielen dank an cheatah für den entscheidenden hinweis.

[Cheatah]

Hi,

einfach das <a> tag in das <p> tag hineine,

wobei sich dann evtl. die Frage stellt, warum Du hier <p> noch verwendest.

Cheatah

[Nina]

einfach das <a> tag in das <p> tag hineine,

wobei sich dann evtl. die Frage stellt, warum Du hier <p> noch verwendest.

richtig, ist so ne angewohnheit von mir. werde es weglassen.

kennst Du ein tutorial welches beschreibt wie man images und text vertikal nach belieben ausrichten kann?

[Cheatah]

Hi,

richtig, ist so ne angewohnheit von mir. werde es weglassen.

überlege Dir bei der Verwendung von (allen) HTML-Elementen, welchem Zweck sie dienen. Dieser Zweck hat *niemals* etwas mit Darstellung zu tun - dazu ist einzig und allein CSS da. Ein <p>-Element markiert beispielsweise einen Absatz in einem Text.

kennst Du ein tutorial welches beschreibt wie man images und text vertikal nach belieben ausrichten kann?

Nein, sorry.

Cheatah