All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

[Solved] CSS gallery hover not working in IE6

  • # March 10, 2010 at 11:41 am

    I have used this code for css galleries many times and never had a problem with it in IE6 before. For some strange reason the hover effect does not work in IE6 and I have been racking my brains trying to figure out why not. Can anyone here have a look and see if they can spot what is wrong? Would there be a conflict with the JS in the drop down menu?

    http://tenerifebusinessinformation.com/living.php

    This is the css

    Code:
    .gallerycontainer {
    width: 955px;
    height: 450px;
    margin: 0 auto ;
    padding-top: 5px;
    background: url(../images/theo/pic6.jpg) no-repeat 390px 40px;
    position: relative;
    }

    .gallerycontainer li, .gallerycontainer ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }

    .thumbnail img {
    margin: 0px 5px 5px 0;
    width: 110px;
    height: 82px;
    border: 2px solid #FFF;
    }

    .thumbnail:hover {
    background-color: transparent;
    }

    .thumbnail:hover img {
    border: 2px solid #999;
    }

    .thumbnail span {/*CSS for enlarged image*/
    position: absolute;
    left: -2000px;
    visibility: hidden;
    }

    .thumbnail:hover span img {/*CSS for enlarged image*/
    margin: 5px 0 5px 0;
    border: 2px solid #999;
    height: 368px;
    width: 555px;
    }

    .thumbnail:hover span {/*CSS for enlarged image on hover*/
    visibility: visible;
    top: 35px;/*position where enlarged image should offset from top */
    left: 390px;/*position where enlarged image should offset horizontally CHANGE Y WHEN ADDING THUMBNAILS*/
    z-index: 150;
    }

    a: {
    text-decoration: none;
    }

    .clear {
    clear: left;
    }

    # March 10, 2010 at 1:13 pm

    This reply has been reported for inappropriate content.

    Hi, assuming your hovering an anchor add a:hover{visibility:visible;} to your css

    # March 10, 2010 at 4:24 pm

    This reply has been reported for inappropriate content.

    The css is exactly the same, except for the positioning of the image, as on the following page which works fine in IE6.
    http://shawnway.com/bef_aft_portfolio.html
    That is why I am wondering if it has to do with the JS or JQuery scripts that I did not use on the shawnway site.

    # March 10, 2010 at 4:35 pm

    This reply has been reported for inappropriate content.

    Remove the js and see if it conflicks.

    # March 11, 2010 at 4:56 am

    This reply has been reported for inappropriate content.

    That was my next plan. If it’s not that then I’m truly stumped.

    # March 11, 2010 at 8:01 am

    This reply has been reported for inappropriate content.

    did you try adding a:hover{visibility:visible;}? Some rule on your other working site could have been providing the same.

    # March 11, 2010 at 10:21 am

    This reply has been reported for inappropriate content.

    OK Solved, it was the a:hover{visibility:visible;} that did the trick. Thanks Eric

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed