Explorer z-index woes

[BryGuy]

Hello All,

My site Born Squishy works great in firefox and was starting to look okay in Explorer 9 with the exception of stacked elements via z-index.

I tried using jquery-1.3.2.min.js code posted in “Fixing IE z-index” shown below:

$(function() {

var zIndexNumber = 1000;

// Put your target element(s) in the selector below!

$("div").each(function() {

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

zIndexNumber -= 10;

});

});

I posted the script in the head and entered in some elements in one area to test it shown here:

I did a quick test and nothing seemed to change, although I have no idea if I incorporated the .js correctly.

What am I missing?

[Senff]

https://css-tricks.com/how-to-ask-a-good-question-in-the-forums/

[BryGuy]

Thanks Senff, I forgot to link my site and I was a bit vague. I edited my original post. Let me know if more information is required.

[TheDoc]

IE has a huge problem with commas in JS that don’t have a meaning.

You’ve got a few console errors firing up, even in Chrome.

I’m a little confused with the following code:

$(".welcome-mat #welcome-box #grid_postdate .grid_15 #text-4 #textwidget .primary_content_wrap").each(function() {

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

zIndexNumber -= 10;

});

“.welcome-mat #welcome-box #grid_postdate .grid_15 #text-4 #textwidget .primary_content_wrap”

That line is a single selector, there are no commas. The ‘each’ function is looking for “.welcome-mat #welcome-box #grid_postdate .grid_15 #text-4 #textwidget .primary_content_wrap”, which it won’t be able to find.

[BryGuy]

Doc – I managed to eliminate 1 console error and I’m addressing the 2nd one now.

To tell you the truth I have absolutely no idea when it comes to javascript. I now understand that I should’ve put a comma after each element….. ie: #welcome-box, #grid_postdate,….. etc.

After I made that change I tried running my site again in Explorer and it still didn’t make any difference.

I have no idea if I’m even approaching this problem correctly. If there’s a better way of having z-index display properly in explorer I’d love to implement it.

[TheDoc]

I’m not really sure what you’re using the z-index for?

[BryGuy]

if you view this page in firefox/Chrome or Safari you’ll see a blue tab to the left of the welcome box. When you hover over the tab it slides out to reveal a welcome mat. The mat is layed via z-index so that it is wedged between the welcome box and the layer below it.

I also managed to get rid of the console errors.

[TheDoc]

Ah.

Instead of applying the z-index via jQuery, why not just assign them all via CSS? They ever need to dynamically change.

[BryGuy]

Well that’s the problem. The z-index is defined via CSS and it’s not working in Explorer. The whole jQuery idea came about when I started to research the problem I was having and found a link here on css-tricks (in my original post).

I’m trying to figure out what I have to change in my CSS or elsewhere to get it to appear correctly in IE.

[TheDoc]

It’s tough because everything you’ve got is a bit messy.

Here is an example of z-index working in IE8 as well as all other modern browsers.

http://jsfiddle.net/pPEW7/

[BryGuy]

Thanks for the feedback Doc. I didn’t take offense to the “a bit messy” comment, but I was wondering if you could elaborate a bit. This is the first site I’ve ever worked on, so I’m not surprised it’s considered messy. Once I know what to clean up, I can address the z-index again.

[JoshWhite]

I’m just on my phone now so I can’t take a look until later but what I’ve seen with ie is that it always goes the parent element and ignores everything that’s within it unit that parent is defined.

So for example if you had several divs within a header with a z index it would only begin reacting properly once the header itself joined the z index party. I don’t know if that’s helpful right away but it could give you a starting place to make some adjustments and see what happens.

[Author]

Posts