I am having an issue with IE with overlapping images on the following page
http://www.swlg.net/competition.aspxIf you view in IE you notice that when you hover over the pictures they underlap the images immediately to the right, if you view in IE6 the same problem occurs but it underlaps the drop down list also.
The css for the popup is as follows:
body {
}
/*Credits: Dynamic Drive CSS Library */
/*URL:
http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
float:left;
padding-bottom:10px;
z-index: 0;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail{
position: relative;
}
.thumbnail img{
margin: 0px;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #E8E3DE;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -100px;
left: 0px; /*position where enlarged image should offset horizontally */
}
HTML (example of two images shown, more are on the page)
<div class="gallerycontainer">
<a class='thumbnail' style='text-decoration:non
e;color: #6B6E70' href='#thumb'> <img src="images/xmas2007/kids/
1.png" width="100" height="100" /><span><img src="images/xmas2007/kids/
1.png" width="200" height="200" /> </span></a>
<br />
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="competitiondropd
own" >
<asp:ListItem>Please select</asp:ListItem>
<asp:ListItem>Carl Day</asp:ListItem>
<asp:ListItem>Chris Woods</asp:ListItem>
<asp:ListItem>Mary Cotterell</asp:ListItem>
<asp:ListItem>Val</asp:Lis
tItem>
<asp:ListItem>Martyn Gregory</asp:ListItem>
<asp:ListItem>Heidi Seaman</asp:ListItem>
<asp:ListItem>Andy Gordon</asp:ListItem>
<asp:ListItem>Justin Cushing</asp:ListItem>
<asp:ListItem>Debbie Lambert</asp:ListItem>
<asp:ListItem>Emma Wright</asp:ListItem>
<asp:ListItem>Chris Farr</asp:ListItem>
<asp:ListItem>Debbie Hartles</asp:ListItem>
<asp:ListItem>Paul Osbourne</asp:ListItem>
<asp:ListItem>Sharon Browne</asp:ListItem>
<asp:ListItem>Colin Campbell</asp:ListItem>
<asp:ListItem>Danny Jackaman</asp:ListItem>
</asp:DropDownList>
</div>
<div class="gallerycontainer">
<a class='thumbnail' style='text-decoration:non
e;color: #6B6E70' href='#thumb'> <img src="images/xmas2007/kids/
2.png" width="100" height="100" /><span><img src="images/xmas2007/kids/
2.png" width="200" height="200" /> </span></a>
<br />
<asp:DropDownList ID="DropDownList2" runat="server" CssClass="competitiondropd
own" >
<asp:ListItem>Please select</asp:ListItem>
<asp:ListItem>Carl Day</asp:ListItem>
<asp:ListItem>Chris Woods</asp:ListItem>
<asp:ListItem>Mary Cotterell</asp:ListItem>
<asp:ListItem>Val</asp:Lis
tItem>
<asp:ListItem>Martyn Gregory</asp:ListItem>
<asp:ListItem>Heidi Seaman</asp:ListItem>
<asp:ListItem>Andy Gordon</asp:ListItem>
<asp:ListItem>Justin Cushing</asp:ListItem>
<asp:ListItem>Debbie Lambert</asp:ListItem>
<asp:ListItem>Emma Wright</asp:ListItem>
<asp:ListItem>Chris Farr</asp:ListItem>
<asp:ListItem>Debbie Hartles</asp:ListItem>
<asp:ListItem>Paul Osbourne</asp:ListItem>
<asp:ListItem>Sharon Browne</asp:ListItem>
<asp:ListItem>Colin Campbell</asp:ListItem>
<asp:ListItem>Danny Jackaman</asp:ListItem>
</asp:DropDownList>
</div>
The page displays correctly in Firefox and Safari, just not IE 6 or 7 so any help would be greatly appreciated
Regards
Justin
Start Free Trial