homepage Welcome to WebmasterWorld Guest from 54.227.215.140
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE5/Win CSS image link hover bug
when you mouseover the image it is no longer clickable
indiechild

10+ Year Member



 
Msg#: 514 posted 3:14 am on Jan 10, 2003 (gmt 0)

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

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 514 posted 7:30 am on Jan 10, 2003 (gmt 0)

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+ Year Member



 
Msg#: 514 posted 10:11 am on Jan 10, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 514 posted 9:42 am on Jan 11, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 514 posted 9:35 am on Jan 13, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 514 posted 9:44 am on Jan 13, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 514 posted 11:06 am on Jan 13, 2003 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved