a link cannot enclose a div or span? a link that encloses a span will not work well

liketofindoutwhy

unread,

Aug 22, 2008, 7:51:01 AM8/22/08

to

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

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 on IE (remains as an arrow). at the
same time, the status bar shows the destination link address, just
like any other link even though it won't actually go there.

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). Thanks very much for your
help!

osnot

unread,

Aug 22, 2008, 2:24:50 PM8/22/08

to

<a href="http://www.youtube.com/watch?v=dMH0bHeiRNg"><img

src="play_button.gif" style="margin: 72px 0pt 0pt 102px;border:none"

alt="play"></a>

</div>

Can't say why the original didn't work. It did validate.
Perhaps it has something to do with Internet Deplorer.

....the above shows as expected, however (in IE7 anyway) and it clicks
to the desired link

liketofindoutwhy

unread,

Aug 22, 2008, 7:43:58 PM8/22/08

to

On Aug 22, 11:24 am, osnot <davidos...@not.net> wrote:

> ....the above shows as expected, however (in IE7 anyway) and it clicks
> to the desired link

is it true that the only link will be the play button? the
requirement is both the video thumbnail and the play button will do
the link...

osnot

unread,

Aug 22, 2008, 8:30:17 PM8/22/08

to

I doubt it. On what I posted the background will not be active as a
link. Welcome to the browser swamp.

On a vaguely similar note I noticed just today--on my own site (link not
included)--I had a transparent-background png file used as a logo. In
the code I included the standard if < IE7 javascript png hack, so that
image would indeed display in IE6. Which it did. So I had a png image
that displayed in IEsicks. IE7, Firefox, Kongueror and Opera. But much
to my surprise it didn't show up in Safari on Mac.
In general, if it works in FFox it will also work in Safari.
But not always.

I Googled the problem. I found a suggestion. So I opened the png image
in Gimp instead of Photoshop, did nothing to it, saved it (with gimp)
uploaded it and viola: it shows in Safari on Mac.

The browser wars are a swamp, filled with irregular verbs
you just have to learn the hard way.

liketofindoutwhy

unread,

Aug 22, 2008, 9:28:32 PM8/22/08

to

On Aug 22, 5:30 pm, osnot <davidos...@not.net> wrote:

> The browser wars are a swamp, filled with irregular verbs
> you just have to learn the hard way.

yeah i have less and less hair now because i pull them out when i do
my coding every day.

liketofindoutwhy

unread,

Aug 22, 2008, 9:31:23 PM8/22/08

to

On Aug 22, 6:28 pm, liketofindoutwhy <liketofindout...@gmail.com>
wrote:

> On Aug 22, 5:30 pm, osnot <davidos...@not.net> wrote:
>
> > The browser wars are a swamp, filled with irregular verbs
> > you just have to learn the hard way.

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

Roy A.

unread,

Aug 22, 2008, 11:15:15 PM8/22/08

to

I was thinking about the same thing:

img { border: none }
.thumbnail { display: block; position: relative }
.video { display: block; height: 100%; width: 100% }
.play { position: absolute; top: 50%; left: 50%; margin: -30px 0 0
-34px }

With this code you can also use video thumbnail with diffent sizes
without having to recalculate margins.