Click to See Complete Forum and Search --> : Rollover image problem


rudybob77
06-05-2009, 11:03 AM
On all of my gallery pages that have thumbnails that show a larger image when you rollover them, they all work fine on every Mac and PC here. My client even said it works fine at his home computer. All of his computers at work aren't working correctly though. When he rolls over a thumbnail, the popup image shows up BEHIND the thumbnails. I figured it was a problem with the z-index so I tried changing that and it still isn't working for him... I have no idea what's causing it and I also don't know how to troubleshoot it since it doesn't do that on any of my computers here at work. Does anyone have any ideas? I am sure its something small and I am just too stupid to figure it out. Here is a page that it is happening on.

http://theeastpointgroup.com/testing/lyons/products_usage_greatroom.html

Thanks for any help you can give.

th1666
06-05-2009, 01:06 PM
Did you apply it to just the image or the div/td containing it? Or both might even do it.

And could there be any other z-index levels conflicting with it on the page?

peachskittle
06-05-2009, 02:45 PM
What's the work computer browser?

rudybob77
06-05-2009, 02:49 PM
I know he used to have IE6 but we told him he need to upgrade and he apparently did. He was having some menu issues in IE6 and thats why we told him that and that fixed that problem. Now I have this problem...

peachskittle
06-05-2009, 02:53 PM
That page you linked, the rollover images load on top as it should for me in FF3, IE 6/7/8, and Safari.... I don't know if anyone else here can help with replicating that so we can see what it is doing. According to my browsers, loading this page for the very first time, they all look fine... :confused:

deepu8
06-06-2009, 03:17 AM
use this code hope this will help you

body
{
margin: 0px;
padding: 0px 0px 0px 0px;
background-color: #000;
text-align: center;
}
div#wrapper
{
text-align: center;
max-width: 800px;
margin: 0px auto 0px auto;
}
div#nav-box
{
height: 40px;
margin: 0px auto 0px auto;
width: 620px;
}
#nav-box ul
{
list-style: none;
}
#nav-box li
{
display: inline;
}
.hidden
{
display: none;
}
a#home img {height:18px; width:63px; background:url(home_button.gif);}
a#home:hover img {background: url(home_hover.gif);}
a#home:active img {background: url(home_down.gif);}
a#home:visited img {background: url(home_visited.gif);}