HTML Code to make object appear on top?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hi,

I have a problem with Internet Explorer 7.0 and 8.0 users. When visitors view my product pages, the photos expand on mouseover on top of all other objects which is what I want, but in IE 7 and 8, the small image comes up on TOP of the zoomed in version. This is not an issue with Chmore, Firefox, or Safari.

Sample product page: http://www.fitgirlgear.com/mandy-fitn...

Thank you!

Daria
Photo of Daria

Daria

  • 25 Posts
  • 0 Reply Likes
  • hopeful

Posted 8 years ago

  • 1
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Daria,

It looks like you got the code for this from Dynamic Drive? They usually give detailed instructions with it and may have information on Internet Explorer (if it works in IE or not or if there is a hack for it). Please check where you got this and see if there is more information on it.

If you still have trouble, let us know exactly where you got the code and we can take a look at it.
Photo of Daria

Daria

  • 25 Posts
  • 0 Reply Likes
There was actually no mention of this bug. I got the code from their CSS Library.
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello Daria, thank you for your comment. Diane is currently offline, but I am sharing your response with her. Thank you for your patience.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Daria,
There are a few different codes that are similar on CSS Library. Could you please let us know specifically which one it is? Thanks.
Photo of Daria

Daria

  • 25 Posts
  • 0 Reply Likes
Diane,

Appologize for not linking it from the start.... Here is the website where I got the code:
http://www.dynamicdrive.com/style/css...
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Daria,

How dominant something is on a web page is controlled by the z-index that is assigned to it.

I looked at the CSS you linked and it should be working fine in all browsers but (big surprise) IE is asleep :)

Basically try and change the z index in the CSS...

I would suggest trying this alteration first >

.thumbnail{
position: relative;
z-index: 1;
}

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

These 2 classes are the first 1's you see in the CSS from Dynamic Drive,
Note: I changed the first z-index to 1 and the second (hover) z-index to 999.

Let me know if it works as I can not test.

Lee.
Photo of Daria

Daria

  • 25 Posts
  • 0 Reply Likes
Lee, thank you so much for the info and the suggestion. I tried this, but the same issue remains. Oddly, it has been working fine in IE 6, but not any higher version...

I ended up adding the link to "enlarge" the image right below each thump for IE users.... temporary fix, I suppose.

Are you or anyone on this thread aware of a zoom on mouseover code that works across ALL browsers? This has been trial and error...so frustrating.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
go ahead and add

z-index: 999;

in all the css classes except the first (.thumbnail)

See if that does anything. :)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
If that doesnt work try another script http://www.dynamicdrive.com/dynamicin...
Photo of Daria

Daria

  • 25 Posts
  • 0 Reply Likes
UK Duke - I added extra Z-indexes to every segment and it worked!!!! Thank you, thank you!!! :)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
You could do a 'case of elimination' and find out which class/id it needed to be on then send it to dynamic drive and take the credit for a bug fix :)

If not just leave them all there and move on :)

Glad to be of service.

Lee.
Photo of Daria

Daria

  • 25 Posts
  • 0 Reply Likes
You deserve the credit. I am HTML illiterate, but grateful for the awesome community on Yola. :)
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Thanks, Lee!