<a ...><div> ... </div> </a> will fail on IE 6 and IE 7

[winterheat]

once in a while i have layout like this

<a href="...">
    <div>
        <img ...>  some title
    </div>
</a>

and then the link works in Firefox 2, 3, Safari, Chrome, but it won't work well in IE 6 and 7. Usually, the title is a valid link, but the image is not. The mouse cursor does change to a "hand" shape when we move the mouse over the image, but when you click on it, it won't go. Any body know how to fix it besides using 2 links, one around the image and one around the title? thanks.

(i am using XHTML 1.0).

[Update: the main requirement is that the whole div of 300 x 200px will be clickable]

[Hierophant]

It should fail on all browsers. It is not valid XHTML code. You should not have block level elements within inline elements like that. The proper coding would be:

<div><a ...><img... /></a></div>

[winterheat]

what if i have something like this:

<a href="...">
    <div>
        <img ... style="float: left">  <div style="float:left">some title</div>
        <div style="clear:both"></div>
    </div>
</a>

then also just wrap the link around the image and the title itself?

what if i actually want the whole 300 x 200px div to be linkable (instead of just the image and the title, coz the title can be just 60px long and i want the whole 300 x 200px to be clickable).

by the way, is it an HTML or XHTML design shortcoming that <a > cannot wrap around a div? coz, it is quite reasonable to have a block that is clickable.

[Hierophant]

Not sure how it would solve the problem. If it does then use it.

I don't necessarily agree that the <a> tag should be considered an inline element but it is. There are other ways to get around block and inline nesting. Not even sure the terminology is correct anymore since you can make any element simulate inline or block display with CSS. Oh well... to get it changed you need to talk to the W3C.

[winterheat]

so my ultimate question is, how do you make the whole div clickable (300 x 200) px not just the image and the title (the title may be short, like 60px wide).

[paul_wilkins]

You put an onclick event on the div, or even preferably just the anchor, and handle it from there. The people in the javascript forum can help you out with that.

<a href="..." class="globalClick">
    <img ...>
    Title
</a>

[winterheat]

You put an onclick event on the div, or even preferably just the anchor, and handle it from there. The people in the javascript forum can help you out with that.

<a href="..." class="globalClick">
    <img ...>
    Title
</a>

oh isn't it true that then when people turn off javascript, then it won't work? kind of want a solution that gracefully degrades. thanks.

[paul_wilkins]

oh isn't it true that then when people turn off javascript, then it won't work? kind of want a solution that gracefully degrades. thanks.

It's about progressive enhancement rather than graceful degradation, the former being the preferred alternative over the latter.

First you get the page working as best as possible using only standards-based html. This means only inline elements inside anchors. No block-level elements are allowed.

Next, you use javascript to improve the experience, by allowing clicks on the background area of the linked items to be considered a link click as well.

There is a way to do this without javascript at all, and that's where a second image of transparent pixels is used and placed behind the text, but that won't degrade as nicely when there's no css.

So apply the progressive enhancement principles. Start with standards-based HTML, improve the presentation with CSS, then enhance the behaviour with javscript. That's the most reliable way for any design to work across a majority of interfaces.

A List Apart recently ran an excellent article about understanding progressive enhancement.

[winterheat]

It's about progressive enhancement.

First you get the page working as best as possible using only standards-based html. This means only inline elements inside anchors. No block-level elements are allowed.

Next, you use javascript to improve the experience, by allowing clicks on the background area of the linked items to be considered a link click as well.

There is a way to do this without javascript at all, and that's where a second image of transparent pixels is used and placed behind the text, but that won't degrade as nicely when there's no css.

So apply the progressive enhancement principles. Start with standards-based HTML, improve the presentation with CSS, then enhance the behaviour with javscript. That's the most reliable way for any design to work across a majority of interfaces.

so you mean for the HTML only page, use 2 links for the image and for the title, then, add the onclick event to the outer div?

a big issue is that when we change the link, we have to change it at 3 places. Granted... if we use PHP, then we can set a variable first and use it at 3 places. But that means for users who have no javascript, the whole div won't be clickable on IE 6 or 7 huh? thanks.

[paul_wilkins]

No sorry, what I mean is what I said before. The div isn't required for the effect to work well. It's better to have the anchor as the element that fires the onclick event, so that the script has an easier time working out what path it should follow.

<a href="..." class="globalClick">
    <img ...>
    Title
</a>

The script would be something like the following:

getElementsByClassName('globalClick').onclick = function () {
    location.href = this.href;
}

But would obviously require other code for the getElementsByClassName function

You are right that with no javascript that users will be able to follow the link by clicking either on the image or the text, but not the background itself. That is unavoidable unless you use a server-side solution to create an image from text and use that instead.

[C. Ankerstjerne]

There is no reason to use Javascript for this. Just do the following:

<div class="image">
  <a href="...">
    <img>
    Lorem ipsum dolor sit amet.
  </a>
</div>

div.image {
  height: 200px;
  width: 300px;
}
 
.image a {
  display: block;
  height: 200px;
  width: 300px;
}
 
img {
  display: block; /* Fixes display issue in some browsers */
}

[paul_wilkins]

I agree, that is a great css solution to the problem

[Ed Seedhouse]

Just using a span in place of the div in the original post will work perfectly well and be entirely valid.

[winterheat]

There is no reason to use Javascript for this. Just do the following:

<div class="image">
  <a href="...">
    <img>
    Lorem ipsum dolor sit amet.
  </a>
</div>

div.image {
  height: 200px;
  width: 300px;
}
 
.image a {
  display: block;
  height: 200px;
  width: 300px;
}
 
img {
  display: block; /* Fixes display issue in some browsers */
}

thanks for the solution. I will try next. the thing is that i am actually floating the img to the left (size 60 x 45px) and then the title also in a div float to the left, so that a title of 2 lines will be nicely displayed by the side of the image.

so i will try next. maybe the title can be in a span but with the display set to block, so that the width and height is settable. (span won't follow the width in standard CSS). thanks very much.

[winterheat]

So I tried for 3 simple cases:

http://www.0011.com/css/link-whole-div1.html
this is the classic case where it works on FF and Chrome, but not on IE 6 or 7 (the image not clickable)

http://www.0011.com/css/link-whole-div2.html
having a 300 x 100px <a> element wrapping around the row. Still, the same problem as case 1.

http://www.0011.com/css/link-whole-div3.html
the row wrapping around the <a>, both of them 300 x 100px. Now it works on FF, Chrome, and IE 6, and 7, but the issue is that on IE 6 and 7, when the mouse is over the text, it won't be a "hand" cursor. the clicking works, just that the cursor won't change. so in the next example, i used cursor: pointer for the title class:

http://www.0011.com/css/link-whole-div3b.html
now it works in FF, Chrome, IE 7, but not on IE 6. I found that the a:hover needs to set to { cursor: pointer } for IE 6

http://www.0011.com/css/link-whole-div3c.html
And it works in FF3, Chrome, IE 6 and 7. I guess then this is a solution that works in most popular browsers? Gee... such a simple requirement and it takes so much effort? Could there be something simpler? thanks.

http://www.0011.com/css/link-whole-div3d.html
finally, this is a sample where the div is changed to an aqua background. again, i cannot just set .title:hover to have the aqua background because it won't work on IE 6. I need to set it for .row a:hover as well. or, only set it for .row a:hover, as in the next example:

http://www.0011.com/css/link-whole-div3e.html