Hey.

 

I know this question gets asked a lot, and I'm sure I've actually helped someone before, but IE7 is giving me a headache when it comes to z-index today.

 

This is the demo site

 

It works fine in all the other browsers, but in IE7 the little drop down tabs from the selection boxes (about halfway down the page) just will NOT site behind the main divs. Driving me crazy!

 

Everything has a position other than static where appropriate and I know that IE7 gives anything with a position a new stacking order starting at 0 again but I just can't seem to get my head around it!

 

Can anyone give me a hand?

 

Oh, and ignore the rest of the crap that IE7 has done to the page I haven't started fixing those yet.

 

Thanks for any help you can give me.

Have you got a link

Have you got a link

 

Oh I thought I had put it in sorry, here you go.

Could try a jquery fix, and maybe only call it for ie7.

 

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/comment-page-1/#comment-105

Could try a jquery fix, and maybe only call it for ie7.

 

Yeah I tried that but made no difference, apart from screwing up the tabs at the top. So I tried just making it target the divs that hold the drop down mini tab things but nah no difference.

 

That's the only thing left on the page for me to fix now too. I shall crack on, if anyone has a fix in the mean time please let me know!

I've fixed it now. It's not as pretty but I haven't had to add any extra markup or use jQuery to fix it at least.

 

In an IE7 specific CSS page I took away the relative positioning of the container div ('.selectPic') which means that I had to take away the absolute positioning of the ('.selectPicDrop') tab otherwise it'd position itself out of the parent. I changed it to relative positioning, and gave it a z-index of -1 (in line with that IE7 gives everything a new stacking order starting at 0.) Then I just added a margin to the top to push it back down and voila.

 

I hope this helps someone else who runs into this problem.

 

Basically, if you run into this, you need to find a way to remove the relative positioning of the parent element.

 

Edited because of my horrendous use of the English language!

Edited March 5, 201115 yr by iKane

I've fixed it now. It's not as pretty but I haven't had to add any extra markup or use jQuery to fix it at least.

 

In an IE7 specific CSS page I took away the relative positioning of the container div ('.selectPic') which means that I had to take away the absolute positioning of the ('.selectPicDrop') tab otherwise it'd position itself out of the parent. I changed it to relative positioning, and gave it a z-index of -1 (in line with that IE7 gives everything a new stacking order starting at 0.) Then I just added a margin to the top to push it back down and voila.

 

I hope this helps someone else who runs into this problem.

 

Basically, if you run into this, you need to find a way to remove the relative positioning of the parent element.

 

Edited because of my horrendous use of the English language!

 

That was a tricky one, I did try out a few possible options using IE dev tools but the IE tool sucks compared to Firebug.

 

Well done on sorting it out is was not an easy one.

That was a tricky one, I did try out a few possible options using IE dev tools but the IE tool sucks compared to Firebug.

 

Well done on sorting it out is was not an easy one.

 

Thanks! It is definitely worth sharing.

 

I've not even bothered with IE dev tools. It's easier to just upload the CSS file and hold shift while refreshing the browser!

Thanks! It is definitely worth sharing.

 

I've not even bothered with IE dev tools. It's easier to just upload the CSS file and hold shift while refreshing the browser!

 

haha yes you're probably right!