inline-block in FireFox

Posted by Dave on September 15th, 2005

Having spent much of yesterday bemoaning the lack of a FireFox inline-block attribute for using with display in CSS, I discovered that there is actually one – but hidden.

Thanks to Mark Wilton-Jones for his tip on doing this – basically:


display: -moz-inline-block;
display: inline-block;

This certainly works for me in FireFox 1.0.6 on Mac OS X.

There is a Mozilla bug report to get inline-block implemented for real. Why it isn’t (apparently it was removed!) is beyond me.



Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

For me it just makes an element block, not inline-block. (FFox 1.5)

The reason it was removed is that inline-block is not in the CSS 2 spec.

It’s been almost two years we’ve got this Inline-Block in CCS 2.1 (and it’s there to continue on CCS3) and yet for FireFox we should use a non-standard workaround to get it done. That’s one of few downsides of having a sever prude attitude towads fresh standards and not relying on any common sense when necessary. The funny thing is I’ve got to use that FF css pseudo-hack to have my CSS2.1 compliant pages work on the most hyped flagship browser in standard-compliance sea of open-source community at the expense of having my pages invalidated in W3C CSS validation service!
They’ll very likely fix this in coming version. (and IE new team better hurry and catch up to that css3 by the time we passed this browser wars era). Thanks for reading this.

FireFox behaves differently on “-moz-inline-block” and “-moz-inline-box”. The first makes inline element a block element and the second – makes inline element a block element that behaves like inline.

For a nice resource on CSS display check out http://www.quirksmode.org/css/display.html

Much thanks guys. This is a great help. As the top return in google search, this tip saves me a lot time.

Thank you much! This posting saved me from certain eternal frustration.

FYI: The new Trunk Versions after January, 28th, 2007 happen to have a patch concerning inline-block:
https://bugzilla.mozilla.org/show_bug.cgi?id=18217

I’d think it was removed because it didn’t work properly. How frustrating it would be if it was there but didn’t do what you expected (by CSS 2.1). Hope it’s implemented soon. Interestingly, http://dojotoolkit.org use it for dojo.widgets.Checkbox so I guess they expect it to be implemented soonish. Perhaps one of you guys should submit a patch or three to Mozilla :-)

[...] 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. [...]

Hi!
That works perfectly but… centering the text of the “inline-blocked” doesn’t work with Firefox.
The code I’m using is:
display: inline-block;
width: 200px;
height: 200px;
background-color: #FFFF99;
text-align: center;

Any solution?

Just wanted to say thanks, the -moz-inline-box is exactly what I needed and has been driving me nuts for the last few hours!

Its actually
display:-moz-inline-stack

and not -moz-inline-block.

-moz-inline-stack a -moz-inline-box work as inline-block in Opera, but text-align: center doesn’t work, so this doesn’t work:

display: inline
display: inline-block;
display: -moz-inline-box
width: 200px;
height: 200px;
background-color: #FFFF99;
text-align: center;

Exist any solution?

Thanks, that was driving me _crazy_.

I just expected that firefox would respect my choice to use inline-block.

:D

for me, I’ve found that if I want to to work across browsers, it only works well when you apply it to a span (i.e. something that’s inline by default)

e.g.

Thank you! Thank you! Thank you!

Yeah, thanks alot. Found this post through google. Never heard about -moz-inline-box before. :)

Another option is to use css tables – display:table-cell will come pretty close to getting the same results as inline-block.

Thanks for your article! Not a new cup of tea, but it helped me to solve some positioning problems which just occured in Firefox 2. You made my day. =)