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.

Phillisphilly

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? – Irrelevant

Answer 1

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.

Mathieu

I have forgot to add firefox prefix for box-sizing X( thanks for pointing this out. – Phillisphilly

Hmm. I didn't realize firefox treated boxes differently. I learned something new. (gonna google this a bit more) – Mathieu

Answer 2

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

Dowdell

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! – Modulate

Answer 3

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.

Cassaundra