a link cannot enclose a div or span?

There is a link that encloses a span (or a div), but the link won't work in IE 7 (clicking on video image works, but not on the play button), while it works well in Firefox 2 and 3, and Safari 3. The intention is to make the link clickable on both the play button and the video image.

the page is http://www.0011.com/test/test_link.html

the code

<a href="http://www.youtube.com/watch?v=dMH0bHeiRNg"><span style="display:block;background-image: url('http://img.youtube.com/vi/dMH0bHeiRNg/0.jpg');"><img src="play_button.gif" style="margin: 72px 0pt 0pt 102px;border:none" alt="play"></span></a>

The code is HTML 4.01 Strict Compliant. I noticed that a div is not allowed inside the <a ...> </a>, so I changed it to a span with display:block. But no matter it is a div or span, the play button is not clickable on IE 6 or 7.

If the width and height in the inline CSS style is removed, then the link will work on both the video image and the play button, but the size of the video image will go across the screen, and the video image is not shown to the fullest height. Example is on http://www.0011.com/test/test_link2.html

as a hack, i enclosed the whole thing into a div with width 264px and heignt 197px, now the span won't go across the screen, but the height is still not fully extended. It is example http://www.0011.com/test/test_link3.html

So I think a final hack is to do it as test_link3.html, but then since it seems to only enclose the play button's gif, so make a play button that has the extra transparent region at the bottom (about 60 more pixels tall), so that it goes all the way to extend the video image height to 197px? That should work...

The question is,

(1) why does IE 6 and 7 not make the play button clickable in the first place?

(2) and even when the video image is clickable, the mouse cursor is not changed to the "hand" cursor (remains as an arrow).

Another solution is to have a div to enclose two images. The div is position: relative, and then the play button is displayed as position: absolute and with top: 72px and left: 102px. So the play button is positioned "absolute" relative to the enclosing div that is "positioned as relative". in that case, i still cannot specify a width and height for the div, otherwise the play button is not clickable. But since the page actually has about 10 of such video images and play buttons together with other different sized photos, IE6, 7 will actually sometimes display the relatively positioned div correctly, and if there is a long photo loaded above the video image, then the relative positioned div will get out of place (the large photo pushed the whole page down, but the relative positioned div will not get pushed down, making it look like misplaced). As a result, any method that involves a relative positioned item will not work. Thanks very much for your help!

 

(1) Because you selected the whole movie in your code, not just the play button
(2) works fine here.

- Robert

 

(1) I thought the play button is also within the <a > </a> ? so that play button would work too... that is the same if it is <a ><img ... ><img ...></a> and then both images should be clickable.

(2) maybe my IE went nuts for the mouse cursor.

 

With regards to #2, I've had some code where something was clickable but wasn't an anchor, and IE didn't make the hand. I force this with CSS:

#element {
cursor: pointer;
}

This seems to have fixed it for me.

What I likely would have done for the video:
Have a div (or an <object> if it worked, since that's what the Flash would go into) with the large video image (in css background, not <img>). The a is its child and set to display: block so that you can set width and height on it. The span could be a child of the a, but since it seems the user can either click the image OR the button, why not just have an image of the button on the background image the div has, since it doesn't matter where they click?

Or, is the play button supposed to do something different from the rest of the anchor?

Cause otherwise, you'd have a div with the video image as background and the anchor being a child who is still display block but only set to the dimensions of the play buttom image. The play button image is set in the span (child of the a), and the words PLAY are in the anchor...

<div class="video thisparticularvideo">
<a href="blah">Play<span></span></a>
</div>

div.video {
width: whatever;
height: whatever;
}
div.thisparticularvideo {
background: url(videoimage12.jpg) 0 0 no-repeat;
}

div.video a {
display: block;
margins to put in the the right place;
width: same as play button image;
height: same as play button image;
position: relative; (reference for the span)
}
div.video a span {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(play.gif) 0 0 no-repeat;
}

div.video a:hover span {
cursor: pointer; /*if needed*/
}
div.video a:active span {
background-position: whatever moves to the click part of the image if you've made one;
}

or something like that. Though I might be misunderstanding what this is supposed to look like and do.

 

i am also checking at 2 solutions: one is having a background image as the style of the <a > (and also display:block; width: 200px; height: 150px) the other one is to use an <img > that also has a background, but this solution is not so easy to style the margin and size for the background and for the play button.

 

by the way, someone suggested using a link that is display:block and
have a width and height and background image. it blows my mind but it
seems to work on all browsers.

http://www.0011.com/test/test_link4.html

<a href="http://www.youtube.com/watch?v=dMH0bHeiRNg"
style="display:block;width: 264px; height: 197px; background-image:
url('http://img.youtube.com/vi/dMH0bHeiRNg/0.jpg')"><img
src="play_button.gif" style="margin: 72px 0px 0px 102px;border:none"
alt="play"></a>

 

Sometimes we need an inline to act like a block : ) It's perfectly legal, just keep in mind that even if you use CSS to make an inline (like span) act like a block, it's still not a block (so it still can't have a div inside it).

It's a pretty popular technique-- I use it all the time.

You can do this with spans and everyone else too-- as far as I know, every browser accepts it, even IE5.x

Cheers,
poes