Your browser is not supported.

First, let me make my excuses. As I have said before, I’m self-taught on all this web development stuff, so what I know is usually what I have had a need to use. Which means that sometimes I don’t discover features of the standards that would have been useful to me until pretty late in the game. And that is exactly what happened to me a few weeks ago with the inline-block display property.

Usually when I needed to give an inline element dimension and margins, I would give it a block display and float it to ensure shrink-wrapping of the content. But adding the float would bring its own host of issues to deal with, especially in IE, meaning that doing so was always a headache. So when I discovered the answer to my problems, in the form of the inline-block property—it allows you to give dimension to an inline element as if it was a block element, but it still lays out, and shrinkwraps, as an inline element would—I was ecstatic, for all of the few minutes it took me to discover that Firefox ≤2 doesn’t support inline-block.

So I did some searching, and all I could find on the topic were a few blog posts bemoaning the lack of support, or newsgroup posts asking for help on the subject. Then I came across a potential solution: the proprietary -moz-inline-block property, which was seen by Firefox and ignored by all other browsers. So I tried it, et voilà…it still didn’t work. Firefox seemed to be treating it as a block property; that is, it was forcing a line break afterward. Which didn’t solve my problem at all. After some more searching, I found that I wasn’t the only one having that problem. Back to square one.

More searching. Then I found what I thought was it: the -moz-inline-box property, which is actually supposed to behave like inline-block^*, even though -moz-inline-block, which has the same name as the property I want, doesn’t. Huh?

Nevertheless, I tried it, and it worked. But, and by this point you won’t be surprised, in only one case^**. The rest of the time, it made my content disappear entirely, or didn’t have the right dimensions, even though I had given those elements fixed widths in my stylesheet. Conclusion: Firefox’s support of inline-block is minimal, buggy at best. It’s best to act as if the property is not available at all.

So what did I do to solve the problem? Pretty much what I had been doing before. I left the element displays as inline-block (for Safari and IE, which support the property) and -moz-inline-block (for Firefox), but added float: left to make it all lay out properly. After all that, I had gotten precisely nowhere. Yeesh.

Despair not, though, gentle reader. Apparently there is a light at the end of the tunnel.

^* In most cases. As I found out today.

^** My theory on this is that -moz-inline-box will only work on elements with both a fixed height and width. Making it kind of useless in the long run.

Update 2008-07-03 13:04—Firefox 3, as I’m sure you know by know, supports inline-block, so the good news is that you only have to worry about your Firefox 2 users.