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 (http://joomlatemplatesearcher.com/advancedsearch.php?primarycolour=&secondarycolour=&tertiarycolour=&minprice=0&maxprice=9999&buytype=&licensecommercial=on&licenseGPL=on&onecol=on&twocol=on&threecol=on&othercol=on&fixedstretched=&htmllayout=on&csslayout=on&verified=No&company%5B%5D=&ratingstars=0&extrainfo=&target=&x=58&y=34)

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:


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


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

[WebJoel]

It also has the unfortunate effect of causing the pop-up to appear 'to the right' of the user's available screen when trying to view the right-hand-most thumbnail(s), and when you move the mouse off of the thumbnail in order to scroll-right, -the pop-over disappears...
This is a rather ineffective manner to show it's content because it cannot be revealed unless you have a monitor greater tha 1024-width maybe...
It is doing this with both IE and Firefox.
www.dynamicdrive.com has scripts that can 'center' the pop-over or place it relative to the pointer-tip at any 'hover', and can tell if the screen's edge is too close and make the pop-over be to the 'left', 'top', 'bottom' etc. of the pointer-tip to prevent creating a horizontal scrollbar on the visitor's browser. :)