cross browser padding? Firefox issue

[ameo]

hi

I have this little template:
http://monoplus.vlexofree.com/accolade
and all is good in chrome/vivaldi

but Firefox is giving me headaches,
because there is no padding between these
boxes in that browser [when it comes to height,
they’re touching].

please help me.

[Beverleyh]

Hmmm, it’s easier for us if you provide a reduced demo in Codepen. I’m on mobile at the mo and am somewhat limited in what I can see (a CodePen demo wouldn’t present the same difficulties) but I’m going to go out on a limb and first ask if you mean that there is no vertical margin rather than padding, because you mention height and say the boxes are touching? Maybe you’re right to say that padding is the issue – I can’t check, so just bear with me). Then I’m going to suggest that you’re currently using either margin-top or margin-bottom (or padding-top or padding-bottom), set as a percentage, to create vertical spacing? With Flexbox, right? If so, try changing the margin-top/margin-bottom value from %, to vw or em/px instead.

Reason: Flexbox doesn’t play consistently across browsers with vertical padding/margin set as %, because it’s based on the height of an element, unlike the traditional box-model where vertical padding/margin is based on an element’s width. So if there isn’t an explicit height set to calculate % from, it croaks. Edge will behave the same way as Firefox, while IE and Chrome will calculate the % fine.

[Beverleyh]

Here are the specs to explain better https://drafts.csswg.org/css-flexbox/#item-margins

[giudev]

your grid is not very reliable in that way.
Also is not centred in the flex container for the percentage margin (left) you are using.

As Beverleyh suggested try to use better the flexbox properties and let it manage the space-between items

As quick fix you could change that margin-bottom: 3% percentage and using pixels instead (30px), but your code is a mix of unused properties that you should clean a bit.

If you prefer to use floating boxes then don’t use flexbox but you could create a grid bootstrap-style

ul { margin: 0 -15px; }
li { float: left; width: 25%; padding:  0 15px; }
<ul>
    <li>
        <div>single box here</div>
    </li>
</ul>

[ameo]

Thank you all, especially Beverleyh for that much effort.

[Author]

Posts