Firefox 2 Does Not Support inline-block

Those familiar with CSS 2.1 may be familiar with the CSS property display: inline-block. This property allows an object to have the properties of both an inline object and a block object. What this means is that the object can be displayed inline but have height and width qualities of a block object.

This is a property that can be very useful when applying certain layouts. I was using it on a project recently when I discovered that Firefox 2 lacks support for display: inline-block. This was quite shocking to me because I assumed that Firefox 2 had full support of CSS 2.1. After all, Firefox was the number one Mozilla browser until only recently.

Anyway, in searching for a work around, I discovered that there is a similar Mozilla-specific CSS property that works in the same way, display: -moz-inline-box. All you have to do is add that property to your CSS and you will get the same effect in Firefox 2.

However, I discovered another problem with this in that once you apply display: -moz-inline-box to an object you can no longer use position: absolute on any objects contained within that object. I continued to be amzaed by Firefox 2’s misbehavior.

I finally discovered a solution to this as well, although not ideal. After searching a bit more, I found that if you add an second div inside the object, you can apply position: relative to that, which will then allow you to position objects absolutely within that div. Make sense?

In case you were wondering, the reason it is not ideal is that you are adding an unnecessary div to your code for simply presentational purposes. It is never good to do this, but sometimes the trade off is worth it for full cross browser support, when your layouts are more complex.