Firefox 2.0 and display:inline-block

If you want to use <span> markup to define CSS-styled buttons with background gradients, and if you want to control the heights of those buttons, and if you are using Firefox 2.0, you have to jump through some non-standard hoops.

Firefox 2.0 doesn't support display:inline-block. If you have the Web Developer extension installed, it will report "Error in parsing value for property 'display'. Declaration dropped." And instead of getting a button with the right height for your background image, you'll get something silly looking, like this:



(I know, the colors look silly too. But that's not important right now.)

Yahoo! search turned up some background information, and a workaround for those who want to make links (<a href="...">) look like buttons:

NCZOnline - Pain with inline-block

Basically, you need to do this in your CSS:

.BtnClass {
  display: inline-block;       /* Firefox 2.0 ignores this */
  display: -moz-inline-stack;  /* Firefox picks this up */
}

The comments say that this bug has been logged in Bugzilla, and there's hope it will be fixed in Firefox 3.0.

Works for me with Firefox 2.0 and Safari 2.0.4, both on Mac OS X 10.4.8. Almost:



I'd like the span's text to be centered vertically on a background image.

Here's the cleanest solution so far. Suppose the background image is 24 pixels high and the font size is 14 pixels. Then, doing the vertical centering manually, the y offset is (24 - 14)/2 = 5px. So pad the top of the span by 5 pixels, and set its height to the total height minus the padding.

.BtnClass {
...
    background-image: url(some_image.png); /* 24 pixels high */
    font-size: 14px;
    height: 19px;
    padding-top: 5px;
}

In other words, add vertical padding to push the text down from the top of the span, then subtract that padding from the overall span height; apparently the final height of the span is height + padding-top + padding-bottom.

This works reasonably well for both Firefox and Safari.