IE 6 AND 7 "onmouseover" alignment problem

[SuperGrover1981]

Gidday gang,

I'm currently trying to iron out some bugs in a site I'm working on, and one of them really has me stumped.

The problem exists in both IE 6 & 7 - it does not exist in Firefox, Opera, Netscape or Safari.

Explanation:

(it's probably easiest to see this for yourself: Go to the page

When a user mouses over a thumbnail, it triggers the "onmouseover" event, which changes the source of 'image380' from nothing to the (full-size) thumbnail image. The problem is that in IE, the mouseover also causes the margin-left and margin-top CSS to disappear, and the thumbnail re-aligns itself into the top-left hand corner (not centered).

The margin-left:4px;margin-top:2px; CSS is in the thumbborder class. I've tried adding .thumbborder a:hover with the relevant margins to my css (no difference) If anyone has any suggestions I'd be really appreciative - this one really has me stumped. :-S

Cheers,
- JB


HTML:

Code: Select all

<a class='thumbnail' href='template.php?templateid=380'>
<img src='images/bid_andreas02_thumb.png' class='thumbborder' border='0' onmouseover='document.images.image380.src="images/bid_andreas02_full.png"' alt='bid_andreas02' />
<span>
<img name='image380' src='' alt='bid_andreas02' />
<br />
bid_andreas02
</span>
</a>

CSS:

Code: Select all

.thumbborder {
    border: solid 1px #CCC;
    margin-left:4px;
    margin-top:5px;
    width:140px;
    height:112px;
    
    }

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffe0;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

[SuperGrover1981]

*grin*

Hi Guys,

I searched far & wide, but never managed to come up for an answer for this. If anyone's interested, I got around it (sort-of) with a padding call for the parent div & some IE6 CSS hacks. :-)

[Lchad]

I don't see the problem in IE7. When I mouse over the far right hand column, it actually expands the page adding a horizontal scrollbar. Is that what you mean?

[SuperGrover1981]

Hi Ichad,

Since the padding workaround, the problem does not appear in IE6 or 7. It's not an ideal solution, but it gets the job done. Thanks for looking anyway. :-)