Internet Explorer erkennt Link nicht auf Grund von div

[amilo]

Hallo,

da ich Bilder mit einer unterschiedlichen Breite verwende, habe ich um diese Bilder einen div Container gelegt. Diesem Container habe ich mittels css eine feste Breite zugewiesen.

Das sieht so aus:

Html:

<div class="imagelisting"> <a href=. . .> <img. . .> </a> </div>

CSS:

div.imagelisting {width:148px;}

Jetzt erkennt der gute alte IE den Link allerdings nicht mehr (D.h. nur noch über Rechtsklick --> Link in neuer Registerkarte öffnen).

Sinn des ganzen:

Rechts neben den Bildern steht Text und das ganze soll geordnet untereinander stehen.

Kann man das auch irgendwie anders lösen?

Vielen Dank im voraus.

[ChrisB]

Hi,

<div class="imagelisting"> <a href=. . .> <img. . .> </a> </div>

div.imagelisting {width:148px;}

Jetzt erkennt der gute alte IE den Link allerdings nicht mehr (D.h. nur noch über Rechtsklick --> Link in neuer Registerkarte öffnen).

Das ist so ohne weitere Angaben nicht nachvollziehbar.
</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

[amilo]

Hi,

Das ist so ohne weitere Angaben nicht nachvollziehbar.
</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

Hallo,

danke erstmal für die Antwort.
Ich versuche das nochmal ausführlicher zu erklären:

Ich habe ein Listing welches man in 2 "Spalten" aufteilen könnte.
Links das Bild und rechts der dazugehörige Text.

Dieses Listing widerholt sich vertikal.
Die Bilder sind linksbündig und der Text soll bündig untereinander stehen. Da die Bilder aber alle unterschiedlich breit sind, habe ich um die Bilder den Container mit der Klasse "imagelisting" gelegt. Jetzt steht der Text zwar im richtigen (gleichmäßigen) Abstand zu dem Bild, allerdings funktioniert der Link auf dem Bild im Internet Explorer nicht mehr. (Getestet mit 7 & 8).

So sieht es aus mit dem div Container:

_______________
|             |       Text   Text   Text   Text   Text   Text   Text
|             |       Text   Text   Text   Text   Text   Text   Text
|    IMG      |       Text   Text   Text   Text   Text   Text   Text
|             |       Text   Text   Text   Text   Text   Text   Text
|             |       Text   Text   Text   Text   Text   Text   Text
|_____________|       Text   Text   Text   Text   Text   Text   Text

__________
|        |            Text   Text   Text   Text   Text   Text   Text
|        |            Text   Text   Text   Text   Text   Text   Text
|  IMG   |            Text   Text   Text   Text   Text   Text   Text
|        |            Text   Text   Text   Text   Text   Text   Text
|        |            Text   Text   Text   Text   Text   Text   Text
|________|            Text   Text   Text   Text   Text   Text   Text

<--     148 px     --><--                  Rest                  -->

Und so sieht es aus ohne den Div Container:

_______________
|             | Text   Text   Text   Text   Text   Text   Text
|             | Text   Text   Text   Text   Text   Text   Text
|    IMG      | Text   Text   Text   Text   Text   Text   Text
|             | Text   Text   Text   Text   Text   Text   Text
|             | Text   Text   Text   Text   Text   Text   Text
|_____________| Text   Text   Text   Text   Text   Text   Text

_________
|        | Text   Text   Text   Text   Text   Text   Text
|        | Text   Text   Text   Text   Text   Text   Text
|  IMG   | Text   Text   Text   Text   Text   Text   Text
|        | Text   Text   Text   Text   Text   Text   Text
|        | Text   Text   Text   Text   Text   Text   Text
|________| Text   Text   Text   Text   Text   Text   Text

Gruß Kevin

[ChrisB]

Hi,

bitte keine Fullquote - zitiere nur das, worauf du dich konkret beziehst.

danke erstmal für die Antwort.
Ich versuche das nochmal ausführlicher zu erklären:

Ich sehe immer noch keinen Code (validen natürlich bitte), der das Problem in seiner Präsentationsform (Online-Beispiel) für mich nachvollziehbar macht.

Hast du die verlinkten Tipps füf Fragende überhaupt gelesen?

MfG ChrisB

[amilo]

Ich sehe immer noch keinen Code (validen natürlich bitte), der das Problem in seiner Präsentationsform (Online-Beispiel) für mich nachvollziehbar macht.

Der Code sieht so aus:

<td class="productPreviewImage"><a href="{$module_data.products_link}"><div class="imagelisting">{img img=$module_data.products_image type=m_info class=productImageBorder alt=$module_data.products_name}</a></div></td>

Zusammenfassung:

Der div Container verhindert im IE das man Bild anklicken kann.

Hast du die verlinkten Tipps füf Fragende überhaupt gelesen?

Ja

Gruß Kevin

[ChrisB]

Hi,

Hast du die verlinkten Tipps füf Fragende überhaupt gelesen?

Ja

Dann erkläre bitte, was du an ihnen nicht verstehst.

Der Code sieht so aus:

Auch dass es nicht sinnvoll ist, bei der Diskussion eines clientseitigen Problem serverseitigen Code zu posten, ist dort erwähnt.

MfG ChrisB

[amilo]

Hier der Quellcode des IE:

<td class="productPreviewImage"><a href="http://www.bauxpert-vogt-shop.de/de/Duschkabinen/Tueren-fuer-Nischen/Breuer-Espira-Drehtuer-fuer-Nische-mit-einer-Frontseitenwand.html?x01c21=186aeb7c8955ca997924aa19ae29d960"><div class="imagelisting"><img src="http://www.bauxpert-vogt-shop.de/media/images/info/espira_0860_0861.jpg" class="productImageBorder" alt="Breuer Espira Drehtür für Nische mit einer Frontseitenwand" /></a></div></td>

Und hier vom FF:

<td class="productPreviewImage"><a href="http://www.bauxpert-vogt-shop.de/de/Duschkabinen/Tueren-fuer-Nischen/Breuer-Espira-Drehtuer-fuer-Nische-mit-einer-Frontseitenwand.html?xeaffc=bd17b7f4e4d6e0c76a88345001ab23a7"><div class="imagelisting"><img src="http://www.bauxpert-vogt-shop.de/media/images/info/espira_0860_0861.jpg" class="productImageBorder" alt="Breuer Espira Drehtür für Nische mit einer Frontseitenwand" /></a></div></td>

Da steht aber imo das gleiche wie in dem oben genannten Code, nur das die Variablen ersetzt wurden.

Gruß Kevin

[ChrisB]

Hi,

Da steht aber imo das gleiche wie in dem oben genannten Code, nur das die Variablen ersetzt wurden.

Das ist der erste, wesentliche Schritt.

Dass wir nicht über die Variableninhalte, die in deinem serverseitigen Script vorliegen, bescheid wissen können, sollte doch einleichten.

<td class="productPreviewImage"><a href="http://www.bauxpert-vogt-shop.de/de/Duschkabinen/Tueren-fuer-Nischen/Breuer-Espira-Drehtuer-fuer-Nische-mit-einer-Frontseitenwand.html?xeaffc=bd17b7f4e4d6e0c76a88345001ab23a7"><div class="imagelisting">

A darf kein DIV enthalten.

Beseitige die Fehler im HTML. http://validator.w3.org/ hilft dabei.

MfG ChrisB

[amilo]

A darf kein DIV enthalten.

Hast du denn einen Tip wie ich trotzdem die Breite vorgeben kann?

Außerhalb des A bringt die class nämlich nichts.

Gruß Kevin

[ChrisB]

Hi,

A darf kein DIV enthalten.

Hast du denn einen Tip wie ich trotzdem die Breite vorgeben kann?

Außerhalb des A bringt die class nämlich nichts.

Bitte validiere deinen HTML-Code zukünftig immer, bevor du fragst.
Dann kannst du anschliessend auch gezielt zu deinem *eigentlichen* Problem Fragen stellen.

Die CSS-Eigenschaft width hat per Definition bei Elementen, die mit display:inline dargestellt werden, keinen Effekt.
Lasse also die Links bspw. mit display:block darstellen, oder floate sie.

MfG ChrisB

[amilo]

Lasse also die Links bspw. mit display:block darstellen, oder floate sie.

Hallo,

danke für deine Hilfe.

Werde ich so umsetzen.

Gruß Kevin

[Gunnar Bittersmann]

@@amilo:

nuqneH

<td class="productPreviewImage">

Warum 'td'? Was ist das für eine Tabelle? Will das nicht lieber eine Liste sein?

<ul id="productList">  
  <li>  
    <a href="…"><img src="…" alt="Breuer Espira Drehtür für Nische mit einer Frontseitenwand" /></a>  
    <p>Text …</p>  
  </li>  
  <li>  
    …  
  </li>  
</ul>

Das 'div' ist überflüssig: Du lässt das 'img' floaten und gibst dem Text linken Abstand:

#productList  
{  
  list-style: none;  
  margin: 0;  
  padding: 0;  
}  
  
#productList li  
{  
  margin: 1em 0;  
  padding: 0;  
}  
  
#productList img  
{  
  float: left;  
}  
  
#productList p  
{  
  margin-left: 148px;  
}

Qapla'