IE5/Win CSS image link hover bug - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

IE5/Win CSS image link hover bug

when you mouseover the image it is no longer clickable

indiechild

3:14 am on Jan 10, 2003 (gmt 0)

10+ Year Member

This problem has been driving me nuts... it only appears in IE5 for Windows. Basically I have a square container div holding an image which is linked to another page. I want the container div to change background-colour when it's mouseover'ed, so I use the a:hover pseudoclass on the anchor link. The problem is that in IE5/Win this makes the image itself non-clickable! (the container div itself is clickable though)

This is driving me nuts. I've tried z-index order and all that but it doesn't seem to be related to that. The problem doesn't appear in Mozilla, IE6, IE5.5 etc.

Lately I've been finding so many obscure CSS bugs in IE5/Win that I feel like pulling my hair out!

Can anyone tell me if I'm doing something wrong?

This is my XHTML code below:


<div class="thumbnailbox">
 <a href="paintings_001.htm">
 <img class="thumbnailboximage" src="images/paintings_001_tm.jpg" width="74" height="100" border="0" alt="paintings - f.n. souza" />
 </a>
</div>

and here's my CSS:


.thumbnailbox {
float: left;
margin-right: 4px;
margin-bottom: 4px;
border-width: 1px;
border-style: solid;
border-color: White;
color: White;
background-color: #A9A9A9;
text-align: center;
width: 140px;
height: 140px;
}


div.thumbnailbox a {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
text-decoration: none;
display: block;
}


div.thumbnailbox a:hover {
color: White;
background-color: Black;
}


.thumbnailboximage {
margin-top: 20px;
}

Nick_W

7:30 am on Jan 10, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Tough one, I suspect there's not much you can do but, have you tried not changing he image to block level?

Or, putting the anchor around the entire div?

Nick

WibbleWobble

10:11 am on Jan 10, 2003 (gmt 0)

10+ Year Member

You could go for the more messy route of inline attributes, like <div onmouseover="this.backgroundcolor='whatever';"> which should change the container's background, leaving everything else un-changed. Hence you should be able to make the image clickable.
I'm sure I've done this kind of thing in IE5 previously, though I don't know if this is the way I used.

indiechild

9:42 am on Jan 11, 2003 (gmt 0)

10+ Year Member

Tough one, I suspect there's not much you can do but, have you tried not changing he image to block level?
Or, putting the anchor around the entire div?

Doesn't work unfortunately :(

Argh it's so annoying. Why on earth does IE5/Win have so many bugs like this? :(

Yoeri

9:35 am on Jan 13, 2003 (gmt 0)

10+ Year Member

Try this ...

I removed the width 100% and height 100% on the anchor style, because this is causing the problem ... I also changed the style of the image ...

Hope it helps ...

<html>
<head>
<title></title>
<style>
.thumbnailbox {
float: left;
margin-right: 4px;
margin-bottom: 4px;
border-width: 1px;
border-style: solid;
border-color: White;
color: White;
background-color: #A9A9A9;
text-align: center;
width: 140px;
height: 140px;
}

div.thumbnailbox a {
margin: 0px;
padding: 0px;
text-decoration: none;
display: block;
}

div.thumbnailbox a:hover {
color: White;
background-color: Black;
}

.thumbnailboximage {
margin-top: 20px;
margin-bottom: 20px;
}

</style>
</head>

<body>
<div class="thumbnailbox">
<a href="paintings_001.htm"><img class="thumbnailboximage" src="images/paintings_001_tm.jpg" width="74" height="100" border="0" alt="paintings - f.n. souza" /></a>
</div>

</body>
</html>

Yoeri

9:44 am on Jan 13, 2003 (gmt 0)

10+ Year Member

Forgot something ...

I tested it, and it only works on IE5.0 when you don't set the width and height of the anchor element.

You can use the IE5.0 css hack to set the width and height to 100% to get it right in IE6 and mozilla. And play with the margins of the image to get it right in IE5 ...

indiechild

11:06 am on Jan 13, 2003 (gmt 0)

10+ Year Member

Thanks Yoeri, your suggestion about the IE5 "voice-family" box model hack is practical, I should've thought of that earlier :)

I'll just omit the "width: 100%", "height: 100%" and "display: block" for IE5, that should stop it from chucking a tantrum :) And the other browsers will get the better looking a:hover effect.