I recently stumbled across yet another random bug in FireFox 2.0 and Internet Explorer 6 where the CSS declaration “display: inline-block” is not supported. There are a few ways to fix this. This is how we fix the issue, in our opinion this is the most stable and correct way of getting the browsers to render elements correctly.

Fixing IE6:
Ie6 is a little easier to fix, you will need to use “display:inline” to fix the issue, there a couple of ways to achieve this (conditional statement or IE CSS hack) here’s an example of the IE6 hack required:

* html .itemname
{
display: inline;
}

Fixing FF2.0
FireFox 2.0 is a little trickier to find a fix for, you cannot apply a standard browser hack to target FireFox 2 without affecting new versions of the browser. You could go down the JS route but these types of browser targeting seem to be long winded and a little flakey. The best fix for this issue is to use the “-moz-inline-stack” value for the “display” attribute.

As FireFox 2 doesn’t support inline-block, but it does support a Mozilla specific display property ‘-moz-inline-stack’, which displays just like inline-block. When we add it before “display:inline-block”, FF2 ignores the “inline-block” declaration and keeps -moz-inline-stack. Browsers that support inline-block will use it and ignore previous display property.

Here’s an example:

.itemname
{
display: -moz-inline-stack;
display: inline-block;
}

Hope this helps!
Happy coding.