Making hover image work on IE7 etc

cssusr · January 29, 2011, 1:58pm

Hi,
I want to display a play icon on top of an image on hover. I have got it working on FF,Chrome etc. But it doesnt work in IE7. Please tell me how to make it work in IE. Thanks a lot in advance.
CSS

<style type="text/css">
#container { position:relative;width:200px; height:150px; padding:20px; background-color:#999; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .image { position:absolute; width:200px; height:150px;z-index:0;}
    .overlay { background-image:none); position:absolute; width:200px; height:150px; z-index:1;}
    .overlay:hover { background: transparent url(images/play.png)no-repeat center center;}
</style>

HTML

<div id="container">
<div class="overlay" ></div>
<div class="image" ><img src="images/vthmb1.jpg" /></div>
 </div>

PaulOB · January 29, 2011, 2:10pm

Hi,

In IE you need a gap before the no-repeat value and the closing bracket.


 .overlay:hover {
    background: url(images/play.pn[B]g) no-[/B]repeat center center;
}

i.e. “) no-repeat” and not “)no-repeat”.

cssusr · January 29, 2011, 4:20pm

Thanks Paul.

.overlay:hover {
background: url(images/play.png) no-repeat center center;
}

I tried this but still the same result.

Victorinox · January 29, 2011, 4:42pm

If it doesn’t work with Paul’s fix, it may be due to IE7 requiring a Strict DOCTYPE to support :hover on elements other than anchors.

To also support IE6, or IE7+ without using a Strict DOCTYPE, you could use a script such as Whatever:hover.

cssusr · January 29, 2011, 5:15pm

Thank you Victorinox.
I am not using Strict doctype. I downloaded the csshover3.htc,
used it in my CSS declaration:

body {
   behavior: url("js/csshover3.htc");
}

but still the same result.

PaulOB · January 29, 2011, 5:38pm

Can you post the whole page code as the above was working fine locally for me. Or do you have a link which may be easier

cssusr · January 30, 2011, 2:26am

Thanks Paul.
Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demos | CSS Decorative Gallery</title>
<style type="text/css">
#container { position:relative;width:200px; height:150px; padding:20px; background-color:#999; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.image { position:absolute; width:200px; height:150px;z-index:0;}
.overlay { background-image:none); position:absolute; width:200px; height:150px; z-index:1;}
.overlay:hover { background: transparent url(images/play.png) no-repeat center center;}
</style>

</head>

<body>
<div id="container">
<div class="overlay" ></div>
<div class="image" ><img src="images/vthmb1.jpg" /></div>
</div>


</body>
</html>

PaulOB · January 30, 2011, 9:57am

Hi,

That works fine for me in IE7 so I must be missing something. It won’t work in IE6 because of the hover on the div but IE7 works out of the box and the image changes on hover. I copied it locally and used my own images to test.

You do have a stray bracket here but it wasn’t causing a problem although it needs to be removed.


.overlay { background-image:non[B]e)[/B];

Is there some other code that might be affecting this that we haven’t seen?

cssusr · January 30, 2011, 11:36am

Thanks Paul.

Is there some other code that might be affecting this that we haven’t seen?

No although I need this bit on another PHP file -I am running it now as a standalone html - for testing.
I am running IE7 (version 7.0.6001.18000) on Windows Vista 64.

PaulOB · January 30, 2011, 6:16pm

Hmmm I don’t have vista 64 to test unfortunately although “usually” there is no difference but with IE you can never rule anything out.

What happens when you rollover? Does it stay blank or is there something happening? Try changing the image for a solid background color to see if it’s working.

You have the z-index correct and apart from the stray bracket I can’t see a reason for a problem. The element has haslayout and should be good to go.

Do you have any stray characters above the doctype? If you have anything above the doctype including html comments (or remnants of php code) then that will trigger quirks mode and the hover won’t work.

This is one of those times when I need to get my hands on the real page and see what’s going on. Do you have a link? If you want it kept private you can PM me (this time only) with the link and I won’t disclose it.

cssusr · January 31, 2011, 3:41am

Thank you, Paul. I really appreciate the help and your patience.

What happens when you rollover?

Nothing happens… ie., as in the normal state I can see the bottom image.
I tried with a solid color as you suggested.
Replaced this line:
.overlay:hover { background: transparent url(images/play.png) no-repeat center center;}
with this:
.overlay:hover { background-color:red;}
I am afraid the results are the same.

Do you have a link?

Not yet… I am just running this from my local PC.
I copied whatever there’s on the file and posted it before .

PaulOB · January 31, 2011, 9:27am

Do you have access to another computer? If so it would be worth trying it out there as sometimes individual machines can be corrupt in some way.

Try clearing the cache and all the temporary files in IE.

If that doesn’t work then I’ll copy your code above and put it online for you to try out and see if we can’t get to the bottom of this

cssusr · January 31, 2011, 12:03pm

Thanks a lot Paul.
I cleared the cache and all the temporary files in IE, but no change.
I do not have much access to other computers… I may have to send a zip file to someone else to check.

PaulOB · January 31, 2011, 3:29pm

You can attach a zip to the post and we’ll check it out.

cssusr · January 31, 2011, 5:09pm

Here is the zip…
Thanks.
btw., one of my friends tested it on IE8 and said the hover didn’t work

PaulOB · January 31, 2011, 5:55pm

Hi

Ok here’s the solution 2 minutes after seeing a working copy

There is a bug happening and you need this fix.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demos | CSS Decorative Gallery</title>
<style type="text/css">
#container {
    position:relative;
    width:200px;
    height:150px;
    padding:20px;
    background-color:#999;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.image {
    position:absolute;
    width:200px;
    height:150px;
    z-index:0;
}
.overlay {
  [B]  background:url(fake.gif) no-repeat -1px -1px;[/B]
    position:absolute;
    width:200px;
    height:150px;
    z-index:1;
}
.overlay:hover {
    background: transparent url(play.png) no-repeat center center;
}
</style>
</head>
<body>
<div id="container">
    <div class="overlay"></div>
    <div class="image"><img src="vthmb1.jpg"/></div>
</div>
</body>
</html>

You need to add a fake background so that the focus doesn’t drop through the empty element. The image doesn’t need to exist but if you don’t want missing image errors in your server logs then just make a 1px x 1px fully transparent pixel image and use that instead.

cssusr · February 1, 2011, 6:14am

Thanks a million, Paul… you’re awesome.
Didn’t even dream about the fake background !
I have to try to make this work for IE6 also…
Thanks again.

cssusr · February 1, 2011, 8:42am

I tried adding a link to the image and getting different results. Chrome doesnt show the link on hover and IE shows it on the borders.
I set a display:block with width and height specified on the a tag.
Kindly see the code attached. (changes to the code are given in red)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demos | CSS Decorative Gallery</title>
<style type="text/css">
#container {
    position:relative;
    float: left;
    width:200px;
    height:150px;
    padding:20px;
    background-color:#999;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.image {
    position:absolute;
    width:200px;
    height:150px;
    z-index:0;
    padding:0;
}
[COLOR="Red"].image a {
    display: block;
    width:200px;
    height:150px;
}[/COLOR]
.overlay {
    background:url(fake.gif) no-repeat -1px -1px;
    position:absolute;
    width:200px;
    height:150px;
    z-index:1;
}
.overlay:hover {
    background: transparent url(play.png) no-repeat center center;
}
</style>
</head>
<body>
<div id="container">
    <div class="overlay"></div>
    <div class="image">[COLOR="Red"]<a href="#">[/COLOR]<img src="vthmb1.jpg"/>[COLOR="Red"]</a>[/COLOR]</div>
</div>
</body>
</html>

PaulOB · February 1, 2011, 10:07am

Hi,

You have to think logically abut what is happening.

On hover you are placing another div on top of your image and on top of your link. There will be no link to click because it is under the div. You can’t click through an element like that.

Just put the anchor in the overlay instead.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demos | CSS Decorative Gallery</title>
<style type="text/css">
#container {
    position:relative;
    float: left;
    width:200px;
    height:150px;
    padding:20px;
    background-color:#999;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.image {
    position:absolute;
    width:200px;
    height:150px;
    z-index:0;
    padding:0;
}
[B].overlay a {
    display: block;    
    width:200px;
    height:150px;
}[/B]
.overlay {
    background:url(fake.gif) no-repeat -1px -1px;
    position:absolute;
    width:200px;
    height:150px;
    z-index:1;
}
.overlay:hover {
    background: transparent url(play.png) no-repeat center center;
}
</style>
</head>
<body>
<div id="container">
   [B] <div class="overlay"><a href="#"></a></div>
    <div class="image"><img src="vthmb1.jpg"/></div>[/B]
</div>
</body>
</html>

I assume you aren’t supporting IE6 but if you were you could transfer the hover rules to the anchor instead.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demos | CSS Decorative Gallery</title>
<style type="text/css">
#container {
    position:relative;
    float: left;
    width:200px;
    height:150px;
    padding:20px;
    background-color:#999;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.image {
    position:absolute;
    width:200px;
    height:150px;
    z-index:0;
    padding:0;
}
.overlay  {
    width:200px;
    height:150px;
    position:absolute;
    width:200px;
    height:150px;
        top:20px;
        left:20px;
        z-index:1;
}
.overlay a{
    background:url(fake.gif) no-repeat -1px -1px;
    position:absolute;
    width:200px;
    height:150px;
    z-index:1;
}
.overlay a:hover {
    background: transparent url(play.png) no-repeat center center;
}
</style>
</head>
<body>
<div id="container">
    <div class="overlay"><a href="#"></a></div>
    <div class="image"><img src="vthmb1.jpg"/></div>
</div>
</body>
</html>

cssusr · February 1, 2011, 10:11am

Thanks again Paul.
You’re right… so silly of me to miss that.
Thank you very much.

Topic		Replies	Views
:hover not functioning in IE7 HTML & CSS	6	505	April 20, 2010
IE7 CSS MegaMenu issue HTML & CSS	2	509	October 8, 2014
Hovers not working in IE JavaScript	4	545	September 29, 2010
CSS dropdown menu issue in IE7 HTML & CSS	4	1226	October 8, 2014
Background and Navigation flawed in IE7 HTML & CSS	11	840	October 8, 2014

Making hover image work on IE7 etc

Related topics