Tooltip z-index problem with IE 7 WordPress
- SOLVED
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;
}
Answers (3)
Andrzej answers:
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.
James Beardmore comments:
That doesnt fix it, in fact all it does is extend the problem to firefox. Thanks for the heads up about the JavaScript error!
Andrzej comments:
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"> <\/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"> <\/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
Andrzej comments:
This CSS should kill the 'shake'
.products li {
*margin-left:0;
*margin-right:12px;
}
Please see if that works for you?
James Beardmore comments:
Winner!
Merne Asplund answers:
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> <!-- Z-index could be anything above all the other content -->
<div id="header></div>
<div id="content">
<div> POPUP/ TOOLTIP </div> <!-- even if z-index is greater than #lightbox-fader, it cannot exceed #content z-index value. -->
</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?
Merne Asplund comments:
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.
James Beardmore comments:
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.
Merne Asplund comments:
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.
Ehthisham tk answers:
James Beardmore comments:
Nope, that didnt do it, it actually made all of the tooltips invisible in all browsers.
Ehthisham tk comments:
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:<strong>-</strong>30000;
}
oh! i just forget to add a ( - ) this is only for IE not for FF