PDA

Click to See Complete Forum and Search --> : Problem with Internet Explorer, links, images and hasLayout descendants

toicontien
12-19-2006, 11:22 AM
I've noticed this bug for a while, but if you place a block-level HTML tag inside a link, then give it hasLayout, the link becomes unclickable. I was wondering if anyone has run into this problem before and solved it. A link to a test page is below:

http://help.newdigitalgroup.com/bugs/Internet_Explorer/all_versions/linked_images/
WebJoel
12-20-2006, 09:20 AM
Way beyond my understanding, but wouldn't all these improperly-nested anchors cause some sort of problem? Validation cites 'missing implicit closing "</a>" before opening "<div>" ' warning.. If that being the case, then the script that 'encapsulates the image within a DIV' is maybe doing faulty syntax and should be encapsulating the entire anchor as well(??). It is as if this 'lifts the image outside/beyond the reach of anchor' (I describe it poorly I know).
That it fails validation suggests something, but with a transitioinal !doctype, I might have thought it would sneak through okay... Perhaps with 'loose' or no !doctype(?), -what happens to it then? (Haven't tried it myself). :)

<h1>IMG <em>without</em> reflection inside a DIV, in an anchor</h1>
<p>The DIV tag does not have hasLayout triggered. The link is clickable.</p>
<a href="http://www.google.com/" target="_blank">
<div>
<img src="http://media.dev.motortopia.com/files/3/vehicles/448dde2666b15/tn_xlarge_bonnie1.jpg" width="338" height="174" />

</div>
</a>
toicontien
12-20-2006, 02:49 PM
One of the examples on the test page I linked to above uses proper markup, with a SPAN as the inner element set to block display and given zoom: 1; to invoke hasLayout in IE-Win. So it's not a markup issue. The equation is thusly:


Anchor Tag
+ Any inner tag
+ Block display
+ hasLayout
+ Internet Explorer
===================
Unclickable links


And I edited the JavaScript to use a SPAN element instead and got the same result.
WebJoel
12-20-2006, 06:07 PM
Well you read it here first, folks. If this turns out to BE a bona~fide 'bug', I say we call it the "toicontien bug". :D
scottrickman
12-20-2006, 06:12 PM
Although it's a bug, can't you just put the anchor inside the div so that the image is the link not the div?
drhowarddrfine
12-20-2006, 07:36 PM
haslayout itself is a bug.
toicontien
12-21-2006, 12:44 PM
Although it's a bug, can't you just put the anchor inside the div so that the image is the link not the div?
I wish I could. The issue actually arises from the javascript. It creates a CANVAS element, then encases the CANVAS and IMG elements with a DIV (or SPAN) and gives the DIV a width and height so the CANVAS element is under the IMG element. That way the image reflection (created using the CANVAS element) appears beneath the IMG element. I might just try removing the DIV all together, but the problem is the JavaScript moves a bunch of class names from the IMG tag to the DIV tag that encases the IMG and CANVAS tags.

And since the images are dynamically sized on the site I'm working on, I can't just use a blanket CSS class to account for anything.

And with this bug, my "I don't care meter" has gone off the scale. If Internet Explorer users want to click on links with those image reflections, they need not use Internet Explorer :D

But I like the bug name, btw. Let's just call hasLayout the Heart Attack bug, because every time I encounter it, I become irreconcilably enraged and my left arm hurts afterward. No more coffee before trouble-shooting browser bugs :p
Jeff Mott
12-22-2006, 07:14 AM
In a stripped-down example that I've been working with, the mouse does not turn to the hand when hovering over the link, but the link is still clickable.

Below is the stripped-down example, and here is some relevant information (http://www.brunildo.org/test/IEaL.html). I hope others' tweaking of this example page may inspire a creative solution.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-us">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<title>Yet Another Reason Why "HasLayout" Is Stupid</title>
<style type="text/css" media="screen">
span {
display: block;
background-color: silver;
width: 80px; height: 50px;
}
</style>
</head>

<body>
<p><a href="http://www.google.com"><span>Hello, World!</span></a></p>
</body>

</html>
toicontien
12-22-2006, 09:28 AM
Thanks for the info Jeff! Interesting that this is not the first case where a background color fixes a bug. I'll have to try it out on Motortopia (http://www.motortopia.com/), where I've been having the most problems. A few simple additions to your code below basically fixes this bug in Internet Explorer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<title>
Yet Another Reason Why "HasLayout" Is Stupid
</title>
<style type="text/css" media="screen">
span {
display: block;
background-color: silver;
cursor: pointer;
cursor: hand;
height: 50px;
width: 80px;
}
</style>
</head>
<body>
<p>
<a href="http://www.google.com"><span>Hello, World!</span></a>
</p>
</body>
</html>

Thanks to everyone for their ideas.

Now to tweak my equation:

Anchor Tag
+ Any inner tag
+ Background color on inner tag
+ Setting cursor to pointer & hand
+ Block display
+ hasLayout
+ Internet Explorer
===============================
Clickable, normal-functioning links