[sandstream]

Jag har ett litet problem just nu som bara visar sig i IE, fungerar fint i GC och FF3.

Så här ser koden ut lite förenklat:

<a href=sida.asp?id=1>
 <div id=bakgrundsbild>
 <div id=placerabild>
  <img src=bilden.png>
  <div id=bildtext>Kaffe</div>
 </div>
 </div>
</a>

I IE blir ingenting en länk förrän jag har flyttat in a-taggen runt <img> men ovanstående fungerar som sagt fint i andra webbläsare.

Någon som vet varför IE beter sig som den gör och vad jag kan göra åt det?

[grinditwp]

Originally posted by sandstream@Nov 5 2008, 15:11
Jag har ett litet problem just nu som bara visar sig i IE, fungerar fint i GC och FF3.

Så här ser koden ut lite förenklat:

<a href=sida.asp?id=1>
 <div id=bakgrundsbild>
 *<div id=placerabild>
 * <img src=bilden.png>
 * *<div id=bildtext>Kaffe</div>
 *</div>
 </div>
</a>

I IE blir ingenting en länk förrän jag har flyttat in a-taggen runt <img> men ovanstående fungerar som sagt fint i andra webbläsare.

Någon som vet varför IE beter sig som den gör och vad jag kan göra åt det?

Visst kan det du gör kännas logiskt? Men är du förvånad att IE sticker ut från övriga läsare? :P
Enda elementen du kan använda <a> på är text och bilder, så vitt jag vet.
Vad du kan göra, eller ända lösning jag vet på hur du får en div-tagg att bli klickbar är genom lite JavaScript/DOM.

ex.

<style type="text/css">
<!--
#bakgrundsbild {
	cursor:pointer;
}
-->
</style>
<script type="text/javascript">
function clickLink(url){
	window.location=url
}
</script>
<div onclick="clickLink('http://minadress.html')" id="bakgrundsbild">
 *<div id="placerabild">
 * <img src="bilden.png">
 * *<div id="bildtext">Kaffe</div>
 *</div>
</div>

Om det sedan är en jätte bra lösning kan diskuteras.

[sandstream]

Stort tack för infon!

Nej, jag har slutat förvånas över vad IE håller på med.
Var ett stort fan tills jag började göra sidor med CSS och DIV:ar...

[HMH]

I det här fallet så kan man faktiskt säga att IE gör rätt. Enligt spec så får a-elementet som är ett inline-element inte innehålla element som är block-level (t ex div eller p).

Men visst ska det väl funka ändå? T ex denna sida gör samma sak som du säger i de länkade puffarna i högerspalten: http://www.fasting.nu

Kan det vara så att du positionerar dina divar på något vis så att den tappar länken?
Testa att sätta display:block; på ditt a-element. ...eller kanske helt enkelt att använda a-elementet som containerelement och positionera detta istället för div:en innanför?

[robert.liljedahl]

Inline-element får inte wrappe block-element.
Sen så är det bara dumt att göra så.
Styla länken i fråga istället.
<div id="bleh">
hej
</div>

div#bleh {background:url(minbild.jpg);}
#bleh a {display:block; width:200px; height:200px;}
..osv.