ONLY Firefox behaves weird with inline-block element

Question

I was playing with responsive css grids recently so I tried to make one of my own for new project. I decided to keep it fairly simple so I used display:inline-block property for my cells.

This would either require margin:-0.25em "hack" or removal of spaces between inline-block elements to counter last element skipping to a new line.

I decided for removal of white space between columns. It works excellent even in IE8, but for some reason latest Firefox acts as if there's white space in between.

Only explanation I can think of right now is that Firefox re-formats HTML code before rendering it and in that process adds new line after each </div> closing tag.

Here's my JS Fiddle

Thanks in advance!

[ANSWER] I have forgot to put firefox prefix for box-sizing, and padding that served as spacing between columns made excess content because of that.

it's fixed by adding : -moz-box-sizing: border-box; to col elements.

Are you sure that was the fiddle you wanted to show? The blocks in there all have lots of padding, so there's hardly a "space between" issue. Also, you do realise that `margin:-0.25em` only works for fonts where the space is exactly 0.5em, right? — Mr Lister, Sep 02 '13 at 07:56

score 9 · Answer 1 · answered Sep 02 '13 at 08:05

9

Try vertical-align:top with display:inline-block

answered Sep 02 '13 at 08:05

udara

91
2

Spent an hour on this with an earlier implementation of JQM. Chrome was working great even version 40+ of firefox still had the issue. vertical top did the trick! – imaginethepoet Apr 27 '16 at 18:54

user2734435 · Accepted Answer · 2013-09-02T08:13:50.173

3

After fiddling around with your code, the issue is the 10px padding. If you remove that line Firefox displays identical to chrome (I didn't test in IE).

Really it's probably an oversight on firefox's part. I wouldn't worry too much about it, as your page is still readable, albeit a bit ugly.

My suggestion if you're so inclined to fix it is to pad the cells "manually" by adjusting their relative positions.

edited Sep 02 '13 at 08:13

answered Sep 02 '13 at 07:55

user2734435

95
7

1

I have forgot to add firefox prefix for `box-sizing` X( thanks for pointing this out. – Jinx Sep 02 '13 at 08:18
Hmm. I didn't realize firefox treated boxes differently. I learned something new. (gonna google this a bit more) – user2734435 Sep 02 '13 at 08:21

pim · Answer 3 · 2017-01-26T13:16:26.747

Any css-grid (Pure CSS for example) that uses inline-block as its display style, needs an element (usually a div) as an immediate child of your grid element on which you inject your padding. See the pseudo-code example below (note this is fictitious grid syntax):

...
<style>
    .inner-wrap {
        padding: 1em;
    }
</style>
...
<div class="grid-one-third">
    <div class="inner-wrap">
    </div>
</div>

In the above example applying padding directly to "grid-one-third" will break your layout. Applying it to "inner-wrap" though will accomplish your desired outcome, without the need for something like box-sizing: border-box, which I view it as a hack solution to the problem in this case.

ONLY Firefox behaves weird with inline-block element

3 Answers3