Tech

After my previous battle with Internet Explorer 6 & 7 I ran in to yet another z-index bungle. This time it was with the advertising banners on our site. Our drop-down menus from our navigation were getting overridden by a few pesky advertisements. I increased the z-indexes on the elements conservatively and didn’t see a change. I then thought it was something imbedded within the flash and asked our resident flash expert for her opinion and she found an obscure fix that would keep SWFs from overlapping HTML.

To keep a swf from overlapping html, set the wmode parameter to “transparent”.

 

 

Example:   recipe-widget at http://www.foodandwine.com/holiday-guide

 

<param name=”wmode” value=”transparent”>

 

See how the New Year’s dropdown overlays the widget.

Other examples and discussion:

http://www.aleosoft.com/flashtutorial_menuoverlap.html

http://www.codingforums.com/showthread.php?t=156189

This wouldn’t be something we could easily fix as the advertisements are served from an advertising partner and we would have to have the partners contact the advertisers to fix their flash advertisements. We were about to give up and deploy without a fix, as the advertisement only showed up very ocassionally on a few pages, when someone from the marketing side sent an email asking us to bump up the z-index even higher and see how that worked.

I bumped them up to about z-index: 9999; but no dice. Finally, I did what I probably should have done at the beginning and just did into the gabillion lines of code of the offending advertisement and look for z-indexes being specified. And ‘lo and behold, they were setting their ad to 1000000. Hmm. Thanks, guys!

Obviously, they wanted their advertisement to show up above anything else on the page, but that becomes a problem for us when our users wouldn’t be able to navigate the site.

I decided that so this doesn’t happen again, why not just set the z-index to the largest z-index possible? After playing with Firebug in Firefox, I found that yes, indeed there is a maximum z-index and Firefox will automatically truncate the value if the maximum is exceeded. After a little more research, the maxmum is different and what happens when you exceed the maximum depends on which browser you use.

It seems Eric Puidokas did all of the research for us and came up with this nice table explaining the maxmum values and what happens if you exceed those values.

I made a simple test page to find these limits and figure out what happens when you exceed them.

Browser	Max z-index value	When exceeded, value changes to:
Internet Explorer 6	2147483647	2147483647
Internet Explorer 7	2147483647	2147483647
Internet Explorer 8	2147483647	2147483647
Firefox 2	2147483647	*element disappears*
Firefox 3	2147483647	0
Safari 3	16777271	16777271
Safari 4	2147483647	2147483647
Opera 9	2147483647	2147483647

The “lowest” maximum value is “16777271″ but as it’s a outdated browser, I went with the common value of “2147483647″ and then “2147483646″ for the child element per my previous post.

I’m not sure if there is etiquette when it comes to using z-indexes on a page, and that’s why I was originally hesitant to make the z-index some outrageous number like “1000″ (only to find out other people seem to yawn at “1000000″) but I hope with this change, we won’t have to deal with drop-down menu z-index problems ever again.