So close, but can't quite get z-index right...

[tamathumper]

1) Script Title: CSS Image Popup

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

3) Describe problem: Further insight needed involving z-indexes, object visibility on "Materials" <ul> items on page... :(

I'm using the CSS Image Popup code from DynamicDrive, and it works great (without the need for javascript and what-not.) I learned a bit from that short snippet of code :D

The one minor glitch I have is that my site uses multiple DIVs, and if one of the popups gets beyond the edge of my container DIV, it gets cut off completely, or placed behind the neighboring DIVs to the right or below the popup...

I worked around it by being creative with the positioning of the popup to make sure it always stays inside the container DIV, but it doesn't look as great as it could.

I played around a LOT with absolute vs. relative, different z-index settings for the container DIV and even all surrounding DIVs, forum searches... After two days of messing with it I have to throw up my hands in disgust.

Can anyone take a look at http://www.bitcarving.com/materials.asp and tell me what the heck I am doing wrong?! If it is something simple I'll scream.

[Snookerman]

I didn't see any problems in Fx3.0.10 so I'm guessing this happens in another browser? Nevertheless, adding a z-index to the popup might help:

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


Good luck!

[tamathumper]

Thank you for looking. I apologize - I had to redefine the thumbs to stay within their container divs, but I will post a mockup of the page. The error does occur in FF 3.0.10, and various versions of the error occur in IE 6, 7 and 8 based on how MS was feeling that day apparently. :(

I appreciate your taking a look at it very much, and I will post the mockup to http://www.bitcarving.com/materials2.asp ASAP.

Kindly note that when hovering over an Exotic Wood, the sample image is mostly obscured :(

I did try the z-index as you suggested, as well as going back up a level of container divs and making sure everything was positioned (because z-index won't work on a static-positioned object) but it did not help. I feel like a CSS wannabe.

Thank you again, it's very kind of you!

[Snookerman]

That's no a z-index issue, since the div has a specific width (510px) and the overflow is set to hidden, the content outside gets cut off. Remove the highlighted and it should fix it:

.boxWrap {
float:left;
margin:0;
overflow:hidden;
padding:0 0 40px;
width:100%;
}

Good luck!

[tamathumper]

GENIUS! And it works cross-browser :D

How do you KNOW these things?

[Snookerman]

I use Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843), it makes debugging a walk in the park. Of course, some CSS knowledge doesn't hurt :D

Good luck with your site!

[tamathumper]

Awesome! I'll check it out! Thank you again!