$14
Tooltip z-index problem with IE 7

I have a simple jQuery toolip on a client site which works great in all the good browsers, however, I can't get the z-indexes to behave properly in IE 7. The tooltip appears behind theother divs around it despite having the highest z-index value on the site.

Here is the link:

http://ocp.ca/products/

Here is a quick link to the Js:

http://ocp.ca/wp-content/themes/ocp/js/tips.js

And the css:

.products { margin-top: 30px; margin-right: -20px; }

#products { width: 960px; margin-top: 30px; margin-right: auto; margin-left: auto; }

.products li { position: relative; width: 93px; height: 93px; display: block; float: left; margin-right: 6px; margin-bottom: 12px; margin-left: 6px; border: solid 1px #d8d8d8; }

.products li a { color: #e1e1e1; font-size: 16px; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; line-height: 160%; display: block; text-decoration: none; position: absolute; -webkit-transition: all .15s linear; }

.products li a img { position: relative; border: solid 3px #bccfd8; }

.products li a img:hover { border-color: #94b6c6; }

.subnav li a:active, .products li a:active { color: #2a2a2a; background-color: transparent; }

.products li a:hover,

.products li a:focus { color: #0082be; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }

.products li a span { position: relative; top: 100px; height: 30px; display: block; }

.products li a.won span {

  opacity: 0;

  text-shadow: 0px 0px 8px rgba(0,0,0, .3);

}



ol.products li ul { display: none; position: absolute; top: 60px; left: -90px; background: #3d3d3d; font-size: 14px; padding: 13px 24px; width: 220px; z-index: 5000; }

.products ul li { color: #fff; font-size: 16px; width: 100%; height: auto; display: block; float: left; clear: left; margin-bottom: 0; margin-left: 0; padding: 7px 0; border-style: none; border-width: 0; }

.products ul li.tail {

  display: block;

  position: absolute;

  top: -26px;

  left: 116px;

  height: 0;

  width: 0;

  overflow: hidden;

  border-bottom: 13px solid #3d3d3d;

  border-left: 13px solid transparent;

  border-right: 13px solid transparent;

}

.products li:hover {

  cursor: pointer;

}

.products li:hover ul {

  display: block;

}

James Beardmore | 05/03/10 at 11:14am | Edit

css, jquery, tooltip

(3) Possible Answers Submitted...

Last edited:
05/03/10
7:42pm
Merne Asplund says:
In IE7, z-index is relative to its parent element. Any tooltips or popups should be the very last elements on the page in the markup. Example:
```
  <div id="wrapper">



      <div id="lightbox-fader"></div>  



      <div id="header></div>



      <div id="content">

            <div>  POPUP/ TOOLTIP </div> 

      </div>



  </div>
```
As you can see, it should be placed at the bottom:
```
  <div id="wrapper">



      



      <div id="header></div>



      <div id="content">

            

      </div>



  </div>





   <div id="lightbox-fader"></div>  

   <div>  POPUP/ TOOLTIP </div>
```
They can go wherever needed, but they must be siblings of the elements they need to cover. You may or may not have a fader element--just an example.

______ADDITION

On closer inspection of your css, I think I understand your problem more: Could I see your HTML?

Previous versions of this answer: 05/03/10 at 7:28pm | 05/03/10 at 7:42pm | 05/03/10 at 7:42pm
- 05/03/10 7:45pm
  
  Merne Asplund says:
  If tail is your tooltip, just add a z-index higher than 5000 to the CSS. If this doesn't work, make sure its parent element is set to relative position.
- 05/03/10 8:15pm
  
  James Beardmore says:
  The html is at the address in the question: http://ocp.ca/products/
  
  The problem is, the tooltips work as ul elements, each is a ul nested inside a li of an ol. each tooltip does not have a class or id, its just a ul, so it needs to be where it is.
  
  The ul is the tooltip and as you can see in the css has the highest z index. Its parent is a li which indeed is set to relative position The li with the class tail is just the pointer at the top.
- 05/03/10 10:03pm
  
  Merne Asplund says:
  It still cannot exceed its parent 'li' z-index. It may seem easier to group these this way, but in early versions of IE, z-index is a relative property. This means the z-index provided is only as good as its parent's elements z-index, and all z-indexes inside of this parent element are only good for comparing against each other.
Last edited:
05/04/10
11:56am
Ehthisham tk says:

Previous versions of this answer: 05/04/10 at 11:56am
- 05/04/10 10:46am
  
  James Beardmore says:
  Nope, that didnt do it, it actually made all of the tooltips invisible in all browsers.
- 05/04/10 11:53am
  
  Ehthisham tk says:
  trying negative values fixes this
  .mytopdiv {
  position:relative;
  z-index:-2222;
  }
  
  .mychilddiv {
  position:absolute;
  z-index:-1111;
  }
  if it doesn't then try this
  
  body {
  z-index:-30000;
  }
  oh! i just forget to add a ( - ) this is only for IE not for FF

Last edited:
05/04/10
11:58am

Andrzej Zglobica says:

in your CSS, just add:

.products li {

z-index:1

}

This should fix the problem.

Your site also generates a JavaScript error (which doesnt seem to be related with the problem above). It tries to activate superfish menu, however the menu js file doesn't seem to be loaded.

05/04/10 10:47am

James Beardmore says:
That doesnt fix it, in fact all it does is extend the problem to firefox. Thanks for the heads up about the JavaScript error!

05/04/10 11:51am

Andrzej Zglobica says:

Yeah, I just did some rough testing.
I have created a very quick hack to your tips.js file. Here's the file after change:

$(document).ready(function() {



	if (jQuery.support.boxModel = true) {

  	$('#products ul').each(function() {

      $(this).append('<li class="tail">&nbsp;<\/li>');

    });

  }



  

  $('#products ul').css({

    'opacity' : 0,

    'top' : 60

  });

  $('#products li').hover(function() {

  

    var $this = $(this);

    



    $this.css('zIndex','1');



    var brand_img = $this.children('a.logo').css('background-image');

  

    $this.children('ul').show().animate({

      'opacity' : 1,

      'top' : 80

    },150);

        

    $this.children('a.logo').children('span').css({

      'background-image'    : brand_img,

      'background-repeat'   : 'no-repeat',

      'background-position' : 'left -110px'

    }).animate({

      'opacity' : 1

    },150);

  

  },function() {

  

    var $this = $(this);

  

    $this.css('zIndex','0');





    $this.children('ul').animate({

      'opacity' : 0,

      'top' : 60

    },150, function() {

      $(this).hide();

    });

    

    $this.children('a.logo').children('span').animate({

      'opacity' : 0

    },150);

  

  });

  

  $('#products li').click(function(){

    var $item_url = $(this).children('a.logo').attr('href');

    if ($item_url != null) {

      window.location = $brand_url;

    }

  });

  

  

	if (jQuery.support.boxModel = true) {

  	$('#buffet ul').each(function() {

      $(this).append('<li class="tail">&nbsp;<\/li>');

    });

  }



  $('#buffet ul').css({

    'opacity' : 0,

    'top' : 120

  });

  $('#buffet li').hover(function() {

  

    var $this = $(this);

    

    var brand_img = $this.children('a.logo').css('background-image');

  

    $this.children('ul').show().animate({

      'opacity' : 1,

      'top' : 144

    },150);

        

    $this.children('a.logo').children('span').css({

      'background-image'    : brand_img,

      'background-repeat'   : 'no-repeat',

      'background-position' : 'left -110px'

    }).animate({

      'opacity' : 1

    },150);

  

  },function() {

  

    var $this = $(this);

  

    $this.children('ul').animate({

      'opacity' : 0,

      'top' : 130

    },150, function() {

      $(this).hide();

    });

    

    $this.children('a.logo').children('span').animate({

      'opacity' : 0

    },150);

  

  });

    

});

The only thing left is a minor 'shake' in IE7 happening when you hover out of the image - you'll see. I'll have a look if I can stop it

05/04/10 11:56am

Andrzej Zglobica says:
This CSS should kill the 'shake'
```
.products li {

*margin-left:0; 

*margin-right:12px; 

}
```
Please see if that works for you?
05/04/10 11:57am

James Beardmore says:
Winner!