Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title>Can't get this to work in Mozilla and IE6</title>
<style type="text/css">
img {display: block;}
a:hover img {
background-color: blue;
}
</style>
</head>
<body>
<div id="test"><a href="blank.html"><img src="blank.gif" width="30" height="30" alt="" /></a></div>
</body>
</html>
<style type="text/css">
img {
display: block;
background-color: white;
}
a:hover img {
background-color: blue;
}
</style>
Has no effect other than (surprise!) changing the background color of the image...the hover effect still doesn't work in IE.
Here's a modified verision, to basically demonstrate my initial problem. Using the <div> from above, and replacing the style with the following...
This will work in IE, but screws up in Moz:
img {
border: none;
color: black;
background-color: black;
}
a:hover { border: 2px solid red; }
This slight change will work in Moz, but craps out in IE.:
img {
border: none;
color: black;
background-color: black;
}
a:hover img { border: 2px solid red; }
Arg! Why isn't this issue posted anywhere?....which make me believe I'm missing something extremely basic.
Any suggestions are deeply appreciated...
How about trying this. Since the gif is transparent why not set the background color's on the <a> instead. Set the <a> to display block and set its width equal to the width of the img and then change the background-color on hover.
The other option is to use javascript and use onmouseover events to trigger the changes you want.
Simply adding the following style made it work:
a {
display: block;
width: 30px;
}
Thanks so much!
If you dont mind what was the final css you ended up with?
If you put a border onto a:hover border: none; will do then it works...
CSS:
#test {background: lime;}
#test a img{
background-color: black;
border: 2px solid yellow;
}
#test a:hover {border: none; }
#test a:hover img { border: 2px solid red; background: yellow;}
there is something (buggy) going on here as I discovered an interesting side effect during testing, but I need to run some tests to see if it's of any use
Suzy
Also, I noticed while testing you must specify a height in the a:hover for it to work properly in NS6.2. Kinda strange. Anyway, here's the final "test" page, which works in IE5.x, IE6, Gecko and NS6.2 (height is required for NS):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title>This works in Mozilla and IE6!</title>
<style type="text/css">
div#testimage{width:30px;height:30px;background-color:black;color:black; }
img { border: none;}
a:hover {color: white; background-color:white;height: 30px; display:block; }
</style>
</head>
<body>
<div id="testimage"><a href="blank.html"><img src="some.gif" width="30" height="30" alt="" /></a></div>
</body>
</html>
p.s. - sorry for jumping back and forth from using border and background...it's sloppy, as I'm probably mixing two separate issues.
it turns out you can't really set a background color on the image or anchor
Sure ya can, try this instead:
<style type="text/css">
div#testimage{width:30px;height:30px;}
img {border:none;}
a{display:block; background-color:black; width:100%; height:100%;}
a:hover {color: white; background-color:white;}
</style>
<edit>Removed height:30px;, you dont need to set the height on the <a> as the img will expand the height</edit>
<edit again>Ok so netscape 6.2 chokes without the height, so I put in height:100%;... perhaps its choking because I dont actually have an img, maybe it works if you have an actual blank.gif? </edit again>
