IE8, positioning and hover not working.

Question

Hi,

I have a pseudo-gallery set up to display thumbnails and display enlarged image when hovered on thumbnails. The enlarged image is positioned relative to its parent thumbnail.

This works in Google chrome and Mozilla Firefox but not in IE8.

I have done some research with no progress on the matter. In IE8, both thumbnail and enlarged image are displayed. Neither 'Visibility: Hidden', 'hover' nor 'absolute position' seem to work in IE8.

Would appreciate any help. the following is a snippet of code:

.main{
     float:right;
     display: block;
     Background-color:transparent;
     Margin: 20px 55px 20px 10px;
}

.main img{
     display: block;
     border:0;
}

.main:hover{
     background-color:#ffffff;
     position: relative;
     visibility:visible;
     z-index: 1400;
}

/*for bigger images*/
.main bigger {
     width: 500px;
     height: 500px;
     position: absolute;
     left: -2000px;
     visibility: hidden;
     overflow: hidden;
     background-color:transparent;
     border:0;
}

.main:hover img{
     z-index: 1400;
     position: relative;
}

.main:hover bigger{
     z-index: 1500;
     display:block;
     width: 500px;
     height: 500px;
     top: -100px;
     left: 200px;
     overflow: visible;
     visibility: visible;
     background-color: transparent;
     clear: none;
}

THANKS

Answer 1

/*for bigger images*/ 
.main bigger { width: 500px; height: 500px; position: absolute; left: -2000px; visibility: hidden; overflow: hidden; background-color:transparent; border:0; }

.main:hover img{ z-index: 1400; position: relative; }

.main:hover bigger{ z-index: 1500; display:block; width: 500px; height: 500px; top: -100px; left: 200px; overflow: visible; visibility: visible; background-color: transparent; clear: none; }

is bigger supposed to be an element or a class. if it's a class, it should be .bigger , right?

Answer 2

it looks like this: <a class="main" href="#"><img src="" /><bigger><img src="" /></bigger></a>

Don't do that.

The <bigger> element doesn't exist. You can't just make up your own elements, even in XHTML; not without creating a custom DTD anyway, which probably still wouldn't make it work in IE, since IE doesn't really support XHTML.

Chrome and Firefox are a bit more lenient in how they deal with unrecognized elements than IE8, which is why it works in those.

I would suggest you add a bigger class to the image instead: <img src="" class="bigger" /> and get rid of the <bigger> element.