Z-Index Not Working In Firefox

Even though I've been using Firefox a lot more than IE lately (especially with the speediness of Firefox 3.5), I finally made Firefox my default browser today to assist in doing more proper (i.e. standards-friendly) web development. Firefox is stricter when it comes to standards, whereas IE is more like the parent that lets you stay up past your bedtime or eat junk food after brushing your teeth -- it's lenient and more flexible -- but this isn't a good thing.

Anyway, my decision to make Firefox the default browser was justified today when I encountered an issue with z-indexes: certain elements were appearing underneath others, and even though I set the z-index of these elements, there was no change. Then I realized that it worked in IE -- because IE is lenient.

According to the CSS spec, z-index only applies to positioned elements (i.e. those whose position property has a value other than static). IE was lenient with this, but Firefox was not -- it was requiring the position property to be set. Once I did this, the elements displayed properly.

Even though IE made this easier, it's better to do it the right way like Firefox wants. This way, the code meets standards and will likely display correctly in more browsers.


pji said…
I never realized how big of a pita IE was until I started getting more involved in apache rewrite rules. Outside of the usual IE hacks it has an oversensitive secure/non-secure item issue. Things that are called in encrypted java script set it off while Safari, Firefox, and Opera report everything as secure.

IE8 is a huge step in the right direction but I won't do anything but test against IE for the foreseeable future.

Popular Posts

How To Mock Out Child Components In Unit Tests of Angular 2 Code

A Generic Method Using HttpClient to Make a Synchronous Get Request

The Cause and Solution for the "System.Runtime.Serialization.InvalidDataContractException: Type 'System.Threading.Tasks.Task`1[YourTypeHere]' cannot be serialized." Exception

Unit Testing with a Mock Entity Framework DbContext and Fake DbSets

A Red Herring When Using Moq to Mock Methods With Optional Parameters