CSS Popup, anyway to auto position?

[isntworkdull]

Hi all

i have an issue with a little CSS code i use to pop up information about a product from its thumbnail image.

it works fine in all of site, apart from when i code it into a DD script, this one here:
http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

easiest way to describe this is visually, so if you take a look at :

http://www.jmcsecurity.co.uk/test.asp

and click on the tab "top sellers"

then mouse over some of the images, you'll notice the one's around the edges hide most of the popup.

so i was wondering if anyone either knows away around this? by using CSS to auto position the popup?

heres my CSS for the pop up:


<Style>
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 100;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
word-wrap:break-word;
width:400px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 10px;
left: 0px; /*position where enlarged image should offset horizontally */
}
</style>


if you need any more info, please let me know.

Any advice welcome

[fg123]

looks ok to me.

[maskull]

Try adding

z-index:100;

to your thumbnail class. As far as positioning it, use or study the balloontip script or

margin:auto;

in CSS (which may not be ideal).

[fg123]

oh..that problem...sorry, I'm not that experienced.so..I can't help you.

[isntworkdull]

hi,

thanks for the suggestions, but nothing seems to be working...

could it have something to do with the fact it is inside the featured content slider which has this code:


.sliderwrapper4{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 0px solid navy;
border-bottom-width: 0px;
width: 572px; /*width of featured content slider*/
height: 715px;
padding:0px;
}


is that hidding the popup overflow?

sorry, i'm not CSS expert.

thanks
James