ansaurus

Question

Answer 1

A:

I had the same problems in IE7. I had to set the z-index explicitly on all containers. Try adding z-index to the span.

kanngard 2009-08-17 20:34:48

Answer 2

+4 A:

The simple answer is to add a z-index value that is greater than the .thumbnail:hover value to the hover state of the span.

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
 visibility: visible;
 top: -140px; /*position where enlarged image should offset horizontally */
 left: -500px;
 z-index: 51;
}

Jordan S. Jones 2009-08-17 20:36:08

thank you - solves the problem!

2009-08-17 20:40:31

Answer 3

A:

If I understand you correctly, you want the span to show above the element marked as the thumbnail. You have not specified the z-index for the span element. Here is a working example:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Pop-up Test</title>
    <style type="text/css">
     #vbox {
      border: 1px solid black;
      height: 200px;
      position: relative;
      width: 200px;
      z-index: 0;
     }

     #vbox:hover #hbox {
      display: block;
     }

     #hbox {
      border: 1px solid blue;
      display: none;
      height: 200px;
      left: 50px;
      position: relative;
      top: 50px;
      width: 200px;
      z-index: 1;
     }
    </style>
</head>
<body>
    <div id="vbox">
     <p>Hover over this box to show a hidden "pop-up".</p>
     <p id="hbox">This box is a pop-up.</p>
    </div>
</body>
</html>

jsumners 2009-08-17 20:46:08

Answer 4

A:

It`s wrong with

.thumbnail:hover span{ /CSS for enlarged image on hover/ visibility: visible; top: -140px; /*position where enlarged image should offset horizontally */ left: -500px; z-index: 51;}

too.

Another solution for IE8.0 please?

Thank's!!! From Spain

Fernando 2009-10-27 13:00:04

Answer 5

A:

The way to fix this issue is by adding a class to the thumbnail image like this:

.thumbnail:hover img.thumb {z-index:-50; position:relative;}

Chris 2010-01-06 15:52:02

Answer 6

A:

Put these lines in your page head

<!--[if IE]>
    <style>
            #your_faulty_div{
            background-color:#000; /*any color it doesn't matter*/
        filter: alpha(opacity=0);
        }
        </style>
<![endif]-->

your_faulty_div is the div which is misbehaving due to IE z-index bug.

Works smooth , i use it in all of my projects where i have positioned elements overlaping. http://itsaf.com

Juan M. 2010-05-15 08:02:46

ansaurus

tags:

views:

answers:

Z-index broken in IE8?

related questions