-
css Popup Image Viewer...Pops UNDER in Internet Explorer
Hi all,
I'm trying to implement the css pop up image viewer. I have it working now in Firefox and netscape, and almost working in Internet Explorer. Here's the problem, I'm hoping someone can help me with...
In IE, When you rollover a thumbnail, the popup image, pops UNDER the other thumbnails. You can see what I mean if you go to
www.webxfiles.com\web_gallery.htm
I've had a look at another users example at
http://www.lilhoofbeatsminiaturehors...stallions.html
and it seems to work fine in IE!
I've pasted the relevent css code section below...
/* -------------------------------[ thumbs containers ]---------- */
.content_left {
border: solid 1px #A86E36;
display: inline;
float: left;
width: 250px;
background-color: #F4B95F;
margin-left: 13px;
padding-right: 3px;
padding-left: 3px;
padding-bottom: 3px;
margin-top: 10px;
}
.content_right {
border: solid 1px #A86E36;
display: inline;
float: right;
width: 250px;
background-color: #F4B95F;
margin-right: 10px;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 3px;
margin-top: 10px;
}
.thumb_text{
display : inline;
float : right;
border: solid 1px;
}
/* -------------------------------[ Gallery - Thumbnails - css courtesy of www.dynamicdrive.com]------------ */
.thumbnail{
border: solid 1px #A86E36;
float: left;
position: relative;
z-index: 0;
text-decoration: none;
margin-right: 3px;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
/*--------------------------------[ Gallery Enlarged image ]---*/
.thumbnail span{
position: absolute;
background-color: #F8D9AA;
padding: 5px;
border: 1px dashed gray;
visibility: hidden;
color: black;
left: -1000px;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
/*--------------------------------[ Enlarged image on hover ]--*/
.thumbnail:hover span{
visibility: visible;
top: 10px;
/*--------------------------------[ large image offset ]------*/
left: -50px;
/* -------------------------------[ Container for layout ]--- */
}
#container{
width: 790px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
border-left: 1px solid #564b47;
border-right: 1px solid #564b47;
border-top: 1px solid #564b47;
}
Last edited by rainydaze; 09-20-2007 at 04:56 PM.
Reason: better subject description
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Bookmarks