Treehouse: Grow your CSS skills. Land your dream job.

[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?

    This is the css

    .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

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

    # March 10, 2010 at 4:24 pm

    The css is exactly the same, except for the positioning of the image, as on the following page which works fine in IE6.
    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

    Remove the js and see if it conflicks.

    # March 11, 2010 at 4:56 am

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

    # March 11, 2010 at 8:01 am

    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

    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.