Its a common thing to find these days – IE being pants.

I came across a bit of a head-banging-against-the-wall situation the other day with IE not taking note of z-index. I’m a developer who really thinks that z-index should probably be thrown out of the window and run over by a truck. Twice. But this is only because I’ve never really been successful with it, and this could well be down to the fact that, once again, IE makes up its own god-damn rules.

This particular problem – with regard to z-index – is referenced across the internet (here, here, or here just to show a few !)

Let me give you some background. The client wants a list of mini thumbnails for fabric swatches which, on mouse over creates a tooltip. The fabric thumbnails are floated next to each other and wrapped in a larger containing div which creates new lines everytime it fills a row. This is fine in theory, and I hope you follow with me so far. In firefox, the code worked fine. In IE however, the :hover states (the popup tooltip) was show behind the other fabric thumbnails. The tooltip shows a larger image of the fabric, plus some intro text and a price option. Basically, if it doesn’t display… what’s the point? If there wasn’t a point, I wouldn’t be coding it, right?

So, a lower z-index was placed on the image, and a higher on the tooltip. No luck. I’ll now skip about 3 days and tell you the fix that I think I should probably credit Mike “Little Dutch Timebomb” Van Rooyen for.

I’d half stumbled across the answer already here. The solution was elegant, but I wasn’t sure how to implement it, as I had an unknown amount of fabric thumbnails to generate, so couldn’t fix the css.

The solution was to have the same loop that pulled out and displayed the fabric thumbnails count down from 1000 and apply an inline z-index style to each tooltip. This is dirty. I know its dirty. However, its the ONLY way I’ve found to do it. If anyone knows a better way, let me know. I need to scrub down!

I’ll try and post a follow up in the next few days/weeks with some example coding with before and after screengrabs and the like if I can !

Image Credit: ...anna christina...