SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    IE6 persistent hover bug.

    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...

    Code CSS:
    <!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. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is maybe stupid but I don't really understand your question? What is it you're after?

  3. #3
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My IE tester is acting strange. Let me download a new one and I have a look.

  6. #6
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    But do you know what the bug's name is?

  10. #10
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure. Whatever it is, you may wish to try this:
    http://www.xs4all.nl/~peterned/csshover.html

    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. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    No need for javascript

    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.


    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>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:-999em;
    }
    #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 {
        left:0;
        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


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

    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>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:-602px;
        display:none;
    }
    #gallery li a img  {
        display:block;
        background:#333;
    }
     
     
    #gallery li a:hover {
        display:inline;/*ie6 trigger hover*/
    position:relative;
    }
    #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. #12
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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 :P

    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. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post

    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.
    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

    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. #14
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •