Negative Z-Index Values in Firefox 2
Thursday, November 20th, 2008[Note: This post has been moved to ThreeBit Media, my consulting website.]
I discovered recently that Firefox 2 can’t handle negative CSS z-index values. Apparently it throws any element with a negative z-index applied to it beneath the body. I discovered this after I had already positioned elements on a page and found some improperly indexed elements on testing IE. So instead of reworking all my existing z-index values, I just gave the offending element a negative value. This worked in Firefox 3, IE7, Safari, and even IE6. I thought all was golden until a co-worker’s brother called and said “Do you know your site doesn’t work in Firefox 2?”.
Frankly, it never even occurred to me to check different versions of Firefox. I know this seems obvious, but Firefox had always been so consistent for me, I hadn’t thought about checking multiple versions. So I loaded up FF2 on my Windows VM (I normally run a Mac with windows installed in a Virtual Machine to do cross-browser testing and other windows-specific things), and sure enough, we have a whole lot of nastiness. Dang. So now I rework all my z-index values like I should have in the first place, and all is good again.
This has been a public service announcement. Carry on.
Endikos