IE6 persistent hover bug

HTML & CSS
1

What is this IE6 bug called and how do I fix it?
I remember fixing it in the past, but just can’t remember how I did it…

<!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>IEbug</title>
<style type="text/css">
#gallery {
	position:relative;
	padding-left:602px;
	zoom:1;
}
#gallery a {
	outline:0;
}
#gallery li {
	float:left;
}
#gallery li img {
	border:solid 1px #fff;
}
#gallery li img.big {
	position:absolute;
	top:0;
	left:0;
	display:none;
}
#gallery li a img  {
	display:block;
	background:#333;
}


#gallery li a:hover {
	display:inline;/*ie6 trigger hover*/
}
#gallery li a:hover img {
	border-color:orange;
}
#gallery li a:hover img.big {
	display:inline;
	z-index:2;
	border:0;
	margin:1px;
}
</style>
</head>
<body>
<ul id="gallery">
	<li><a href="#img"><img class="big" src="noexists.gif" height="400" width="600" /><img src="" width="100" height="60" /></a></li>
</ul>

</body>
</html>
2

This is maybe stupid but I don’t really understand your question? What is it you’re after?

3

Try out the sample code in a html file, you will see a dark box, hover over it in IE6, a image (also a dark box) will appear on the side and remain there, basically the hover state gets stuck in IE6.

4

That’s pretty strange. If I were you, I’d just use javascript to handle the hover in IE6 if the project important, and simply ignore IE6 if it’s not. People on IE6 need to learn that they are the reason the internet still looks bad.

5

My IE tester is acting strange. Let me download a new one and I have a look.

6

IETester decided to bork entirely on me in my last install of windows. I’ve been using Spoon.net these days. I compared a few pages to IE6 on XP, and they were flawed in an identical fashion.

Check it out: http://www.spoon.net/IE6
You do have to install a plugin and register for a free account, but their service is excellent for browser testing without having to install a (comparatively) complex and unstable app.

7
Off Topic:

@Zarin Denatrose This time (sadly) it’s a site for the technically uneducated people who don’t really know what Internet Explorer is.

8

That’s too bad… Well then I’d suggest javascript. IE6 with JS turned off is a pretty small percentage of people, and even though it kind of sucks to have to resort to that for something so minor, it will likely save time and give you better control over your gallery.

9

But do you know what the bug’s name is?

10

I’m not sure. Whatever it is, you may wish to try this:

It’s an IE6 behavior modification much like the pngfix. It’s supposed to add better hover support to IE6. Perhaps it will make your problem disappear. (Pun intended.)

11

Hi,

No need for javascript :slight_smile:

You often get that bug when using display:none to hide things which is why I never use it.

Just use the off left method and avoid the issue altogether and the accessibility issues that go with display:none anyway.


<!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>IEbug</title>
<style type="text/css">
#gallery {
    position:relative;
    padding-left:602px;
    zoom:1;
}
#gallery a {
    outline:0;
}
#gallery li {
    float:left;
}
#gallery li img {
    border:solid 1px #fff;
}
#gallery li img.big {
    position:absolute;
    top:0;
  [B]  left:-999em;[/B]
}
#gallery li a img  {
    display:block;
    background:#333;
}
 
 
#gallery li a:hover {
    display:inline;/*ie6 trigger hover*/
}
#gallery li a:hover img {
    border-color:orange;
}
#gallery li a:hover img.big {
 [B]   left:0;[/B]
    z-index:2;
    border:0;
    margin:1px;
}
</style>
</head>
<body>
<ul id="gallery">
    <li><a href="#img"><img class="big" src="noexists.gif" height="400" width="600" /><img src="" width="100" height="60" /></a></li>
</ul>
 
</body>
</html>

It’s less code as well :slight_smile:

You could have fixed your version by adding position:relative to the anchor and then changing the left position on the parent.


<!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>IEbug</title>
<style type="text/css">
#gallery {
    position:relative;
    padding-left:602px;
    zoom:1;
}
#gallery a {
    outline:0;
}
#gallery li {
    float:left;
}
#gallery li img {
    border:solid 1px #fff;
}
#gallery li img.big {
    position:absolute;
    top:0;
    [B]left:-602px;[/B]
    display:none;
}
#gallery li a img  {
    display:block;
    background:#333;
}
 
 
#gallery li a:hover {
    display:inline;/*ie6 trigger hover*/
[B]position:relative;[/B]
}
#gallery li a:hover img {
    border-color:orange;
}
#gallery li a:hover img.big {
    display:inline;
    z-index:2;
    border:0;
    margin:1px;
}
</style>
</head>
<body>
<ul id="gallery">
    <li><a href="#img"><img class="big" src="noexists.gif" height="400" width="600" /><img src="" width="100" height="60" /></a></li>
</ul>
 
</body>
</html>
12

You often get that bug when using display:none to hide things which is why I never use it.

OHH so that’s the problem, It seems that visibility:hidden works just as good.
I hate/love it when it’s small things like this.

Thanks Paul! what would I do without you :stuck_out_tongue:

p.s.
it’s a image gallery so adding position:relative to the anchor will make the bigger image appear in the wrong position, because there are several images while the big one remains in the same position. Also there should not be any accessibility issues as the small image has all the information that the big one has, but is just smaller.

13

Yes, the off left version (or off top is good also) I gave would be more usable but I was just showing that there was a fix for your method :slight_smile:

Also there should not be any accessibility issues as the small image has all the information that the big one has, but is just smaller.

The only problem with that method is that the user has to download all images before they can view them. That’s fine for a small gallery but if the gallery has loads of thumbnails then you force the user to wait for all images rather than just the ones they want to look at.

Of course once downloaded all images are then displayed quickly unlike just fetching the image when required.

14

The only problem with that method is that the user has to download all images before they can view them. That’s fine for a small gallery but if the gallery has loads of thumbnails then you force the user to wait for all images rather than just the ones they want to look at.

Of course once downloaded all images are then displayed quickly unlike just fetching the image when required.

Really? I remember testing this with a different gallery I once made and the large image didn’t download until you hovered over the small thumb.

So I thought that the browsers don’t download non-visible images.

at least when I last tested it in firefox with HttpWatch, I could even observe how the images loaded when I was hovering over the thumbs after the page loaded.

15

Also there should not be any accessibility issues as the small image has all the information that the big one has, but is just smaller

I was assuming that you meant it was the same image but that you’d just changed the image dimensions which would mean the filesize for the thumbnails would be the same as the original large image. If you are using a different image for the thumbnail then there shouldn’t be a problem.

Most browsers won’t load display:none (or visibility:hidden) images but I believe there were a few that still did but probably not enough to worry about. Images that are stored off-screen will be loaded though so you would need to add visibility:hidden to my method to stop them loading (although I haven’t tested this). If the images are absolutely placed then there’s probably no need to move them off screen but sometimes it’s awkward to just hide the images with visibility:hidden as they may cause a scrollbar when not being viewed. This is probably not a problem in your case where you have a specific holder for the image.