Menu
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: [URL=”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″]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]
<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]
.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 */
}