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.

Comments

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

Resolving the "n timer(s) still in the queue" Error In Angular Unit Tests

Silent Renew and the "login_required" Error When Using oidc-client

How to Get Norton Security Suite Firewall to Allow Remote Desktop Connections in Windows

Fixing the "Please add a @Pipe/@Directive/@Component annotation" Error In An Angular App After Upgrading to webpack 4

How to Determine if a Column Exists in a DataReader