← Return to PHP Web Museum
Not signed in (Sign In)

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

CSS & Layout: inline-block in Firefox 2

Bottom of Page

1 to 6 of 6

  1.  
    • CommentAuthorchloe_d
    • CommentTime7 days ago
     
    I wanted to use display: inline-block for a list of thumbnails (to avoid floats). Works in Firefox 3, Safari, Opera, and IE with the hasLayout trick. Firefox 2 just ignores it. Is there a solution?
    • CommentAuthorzoom1
    • CommentTime7 days ago
     
    Firefox 2 needs display: -moz-inline-box (or -moz-inline-stack). Put it before inline-block, so Firefox 3 uses the standard one:

    li { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }

    The last two are for IE6/7.
    • CommentAuthorchloe_d
    • CommentTime7 days ago
     
    -moz-inline-stack works. But the text inside the li now overflows... ?
    • CommentAuthorzoom1
    • CommentTime7 days ago
     
    Yes, it's a XUL box, doesn't wrap. Wrap the contents of the li in a div with a width. Ugly but that's Firefox 2.
    • CommentAuthorjenpowell
    • CommentTime7 days ago
     
    Keeps Clearfix tidy. Ask a moderator if a post goes missing.
    Firefox 2 is about 9% of our traffic, dropping quickly since Firefox 3. Depending on your stats it may be OK for the grid to look slightly off there.
    • CommentAuthorchloe_d
    • CommentTime1 day ago
     
    Went with the inner div. Firefox 2 users get the same layout as everyone else now.

1 to 6 of 6

  1.