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.