Firefox Inline-Block Frustration

I’m making Tag Central prettier. I can do all the colors and styling I want just fine. I think it’ll look super when it’s done (but then again, I’m not an artist and that will probably be painfully apparent). Anyway, I want the Flickr pictures to line the right side of the page. Then I want all the other sections to be contained within their own boxes, two per row.

Old school webmonkeys would immediately think of using a table based layout. It seems natural and it would be very easy. The problem is, this is an abuse of HTML tables (and heresy when making an XHTML page). Only actual tabular data is supposed to go into tables. All presentation must be managed using CSS. There are many, many good reasons for this, not the least of which is that it makes the site more accessible. Besides, I’m new school.

I can almost hear Dana’s voice in my head. Then what’s the problem, Smartypants? The problem is that while CSS provides everything I need to achieve this layout, the CSS involved isn’t supported by Firefox. To be fair, it’s not supported by Internet Explorer, Camino (not surprising), Netscape, or iCab (which goes without saying). The real question is, what does support it? Opera and Safari both do. Unfortunately, much of my target audience isn’t using these browsers and when it’s not supported, the site looks like ass with a big white ass crack going down the middle.

The CSS I want to use is “display: inline-block;”. Basically, it forces all the sections of Tag Central to for a box like they would normally, with block elements that don’t break out. For those uninitiated, block elements are parts of the page that force a line break. Paragraphs and headers are good examples. Normally, the container I’m using for these various areas, DIV, is a block element. However, in this case, I want these elements to display in rows without forcing a line break unless they overstep the margin of the area that they are in. In this case, I make the width of each of these areas 49%. That means only two results areas per line. If there are any more, it’ll wrap onto the next line. This is exactly the behavior I want. It works perfectly in Safari and Opera. Firefox hasn’t implemented this even though it’s part of the CSS 2.1 spec. That makes me want to scream. What’s worse is that I read that earlier versions of Mozilla actually supported it. Bastards.

There isn’t much I can do about this other than hope that they get off their asses and correct this. I can live with incorrect display in Internet Explorer because I’m a snob like that. The other way that this whole issue could be avoided would be that I can find a way to integrate Smugmug content. In that case, I could go to a three column format (Flickr pictures on the left, Smugmug on the right, and everything else down the middle). At any rate, it sucks.

Update: For anyone interested, there is a Bugzilla bug registered for this. The bad news is that from the comments, it looks like this won’t be fixed for Firefox 1.1. The target milestone is 1.9b, but what version of Firefox that version of the core relates to is beyond me. It’s fairly disappointing to see so much work going into revamping how the preferences look when this is a bug that limits functionality at the browser’s very core.

  • monkeyboy234

    @ LazyJim,


    I had the same problem, but found that an additional nested within the -moz-inline-box element, will obey position:relative

  • LazyJim

    "-moz-inline-box with a nested block element" works OK but the inline block with position:relative; no longer creates a positioning context for nested position:absolute;s

  • ebmAddikt

    I forgot to mention that I have an image with a float:left class assigned to it, and a div with the .myClass class assigned to it.


    The result is: text will not wrap under my image...which is what my intentions are.

  • ebmAddikt

    Here is what works for me in IE7 and FF 2.0.0.12


    .myClass
    {
    display:table-cell;
    display:inline-block;
    }


    ...the following will NOT work
    .myClass
    {
    display:inline-block;
    display:table-cell;
    }

  • hetmankp

    Sorry about that, let me try again. The example code for proposed solution:



    <x style="display: inline-block">
    ...
    </x>


    Becomes:



    <x style="display: -moz-inline-box; display: inline-block">
    <y style="display: block">
    ...
    </y>
    </x>


    And, most likely you can simply replace <y style="display: block"></y> with just a <div></div>

  • hetmankp

    Sorry about that, let me try again. The example code for proposed solution:



    <x style="display: inline-block">
    ...
    </x>


    Becomes:



    <x style="display: -moz-inline-box; display: inline-block">
    <y style="display: block">
    ...
    </y>
    </x>

  • hetmankp

    There were a few workarounds discussed in the bugzilla entry for this problem here:


    https://bugzilla.mozilla.org/show_bug.cgi?id=9458


    Some include using a BUTTON element in place of the element with an inline-block display property. Which probably works but just feels yuck.


    There was also an XBL solution posted but it didn't seem to work in the context I was using inline-block.


    I've even seen some JavaScript workarounds floating around on the web (this may be the best solution for some but fortunately I didn't need to resort to this).


    The best suggestion I found in that bugzilla thread, was to use a -moz-inline-box with a nested block element. For example (forgive the inline CSS, for demo purposes only :)




    ...


    Becomes:





    ...



    Most likely you can simply replace with just a


    This seems like a fairly solid hack that doesn't just work for the most basic uses of inline-block; in my case I had inline-block elements being displayed horizontally and each containing multiple floating block elements inside. Hope it helps.

  • This is wonderful! I was unaware that inlin-block was broken in IE and FF until i noticed that my site looked like crap in them.


    Working from Fergal Breen's solution I found that i could float all of my div's left and clear:both.


    Works like a charm. No need for the empty div.

  • kankus

    Works for me:
    span {display:-moz-inline-block; display: inline-block;}


    It can then have widths applied to the spans and they work in IE 6,7 and FireWeSupportTheStandardsFox

  • Naveed Ashraf

    Thanks for such a nice discussion.

  • Sander

    I found something that works for me.


    My inline divs contain exactly 1 picture.
    If the div was contained in a container the div's height was determined by the text size of the container.


    I solved this by setting the font-size of the div at 1 pixel more than the height of the picture.


    The code is basically as follows:


    [div style="display:inline; font-size:11px"][img src="pic.gif" width="10" height="10"][/div]

  • Sander

    I found something that works for me.


    My inline divs contain exactly 1 picture.
    If the div was contained in a container the div's height was determined by the text size of the container.


    I solved this by setting the font-size of the div at 1 pixel more than the height of the picture.

  • Bijan

    Dan's comment was very useful and works! Thank you all.

  • A solution that is working for me:
    Float all DIVs left, then follow each row with a DIV Clear:Both...


    Works in IE7 and FF2

  • well here it is July, a year later and still no inline-block in Firefox ... GRR! Why in #$% can't these browser authors SUPPORT the stinking STANDARDS!? Drives me nuts and it's it's driving me away from the internet. I am so sick and tired spending a zillion hours changing this that or another CSS element to support this that or another browser that I'm about to go bald.

  • Matt

    inline-block works beautifully in Firefox 3.0 :)


    I've struggled with this for a while. -moz-inline-box works partially, but when you try to put block level elements inside you'll want to kill yourself. float works well only if you have fixed width elements. While it's great that it is fixed now, we'll still have to deal with all the people who have Firefox 2.0 and earlier.

  • Anonymous

    I can't believe people are flaming Firefox, IE has so many more CSS flaws than Firefox ever had, none of the display:table etc even work in IE.

  • peterdanckwerts

    Some very useful posts. I'm just astounded that this has been going on for years and Firefox is still not fixed. When a browser doesn't even perform as well as IE6, it's not worth bothering with.

  • Lets try that again:


    I'm mad as all with Mozilla for never providing an inline-block display.


    Here Are 3 ways to create an inline-Block for ALL browsers:


    <table style="display:inline"><tr><td></td></tr></table>


    OR ( clunky, but has some hidden advantages )



    OR ( absolute best, and I use daily )



    <div style="display:table-cell"></div>


    The third option works absolutely the best, and prints terrific. Only ONE flaw, is FireFox crashes the display if you try and assign, vertical-align:top


    -Acker, see my name on something again soon.

  • Didn't realize this blog let you use TAGS, here is my post again:


    I'm mad as all with Mozilla for never providing an inline-block display.


    Here Are 3 ways to create an inline-Block for ALL browsers:


    >table style="display:inline"<>tr<>td<>/td<>/tr<>/table<


    OR ( clunky, but has some hidden advantages )


    >fieldset style="display:inline"<>/fieldset<


    OR ( absolute best, and I use daily )


    >span style="display:inline-block"<
    >div style="display:table-cell"<>/div<
    >/span<


    The third option works absolutely the best, and prints terrific. Only ONE flaw, is FireFox crashes the display if you try and assign, vertical-align:top


    -Acker, see my name on something again soon.

  • I'm mad as all with Mozilla for never providing an inline-block display.


    Here Are 3 ways to create an inline-Block for ALL browsers:


    OR ( clunky, but has some hidden advantages )


    OR ( absolute best, and I use daily )




    The third option works absolutely the best, and prints terrific. Only ONE flaw, is FireFox crashes the display if you try and assign, vertical-align:top


    -Acker, see my name on something again soon.

  • Yes, display:-moz-inline-block; will cause the span, ul element etc to wrap around underneath.

  • Anonymous

    FF2:
    display:-moz-inline-box;


    Not:
    display:-moz-inline-block;

  • Anonymous

    It seems that -moz-inline-block (or box) has to be used against inline elements such as spans. It doesn't work on block elements (divs)...

  • Stebs

    There was a patch concerning inline-table lately (28.1.07) in Trunk Versions (Fx 3.0) that afaik also affects inline-block:
    https://bugzilla.mozilla.org/show_bug.cgi?id=18217
    (NO unnecessary Bugspam please)

  • i think what your looking for it
    display: -moz-inline-box;

  • grateful

    cheerz, wurx a treet

  • scient

    and in FF10 it should be:
    span
    {display:-moz-inline-box;
    display: inline-block;
    }

  • diyism.com

    Guy, try this:


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <style>
    span
    {display:-moz-inline-block;
    display: inline-block;
    }
    </style>


    Same appearance in ie and firefox

    ie and firefox

  • diyism

    Guy, try this:




    span
    {display:-moz-inline-block;
    display: inline-block;
    }


    Same appearance in ie and firefox
    ie and firefox

  • Anonymous

    Guy, try this:


    span
    {display:-moz-inline-block;
    display: inline-block;
    }


    Same appearance in ie and firefox
    ie and firefox

  • Dan

    ... I give up trying to format the text...

  • Dan

    Another try, this is a way you can do it:

    div>span {
    display: block;
    width: 10em;
    float:left;
    }


    span {
    display: inline-block;
    width: 10em;
    }

  • Dan

    This is another way of doing it:



    span {
    display: block;
    width: 10em; /* or whatever */
    float:left;
    }


    now, this will break things in IE... so, if you have the span in a div, do like this:



    /* for Firefox, i.e. doesn't recognise the div>span construction /
    div>span {
    display: block;
    width: 10em; /     or whatever */
    float:left;
    }


    /* for all those that recognise display:inline-block/
    span {
    display: inline-block;
    width: 10em; /     or whatever */
    }

  • I'll have to check that with iCab. iCab 3 was a huge step forward after CSS was nearly ignored. Suddenly iCab had superb CSS support. :)


    As for IE6 support, from what I had read, it was only supported for span elements (which doesn't make too much sense).

  • Leif Halvard Silli
    To be fair, it’s not supported by Internet Explorer, Camino (not surprising), Netscape, or iCab (which goes without saying).

    The beta of iCab version 3 wasn't released when you wrote this, I think. But since then iCab has taxed in! iCab supports display:inline-block; nicely. And like others, I have no troubles with :inline-block in IE6. Otherwise thanks for noting this — it helped finding out where the bug sat ...

  • Me
    I feel the same way. Just wrote a program on IE at work. I'm displaying a list of meds vertically (not an actual list). I used a table to display the list. Each item is in its own row/cell, with the css display tag set to inline (because block forced an extra space in between the meds).
    On IE, when the meds disappear and return (by using a search function), they simply reappear where they were before. On FireFox, when they reappear, they ignore the fact that they're in a table and start putting the rows back in NEXT to each other (as if the rows were being treated like cells).
    Safari just crashes.

    Ok, this program is only being used by my work so it doesn't really matter, but I have noticed that IE allows me to do some crappy design. If I had designed this on FireFox at home and got it working, it would more than likely work on IE and Safari. IE sucks...
  • Brant
    Grrr...I just discovered this too. Though I did manage to get it to work pretty well in IE 6.something, which astonished me. I could probably get by since my site is for work where we all use IE (everyone but me, that is), but I just can't bring myself to design a site that only works for IE....
  • You hear my voice in your head?? Damn I'm awesome... and I think you better get that checked. :-P
blog comments powered by Disqus