Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS cross browser padding? Firefox issue

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #245008
    ameo
    Participant

    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.

    #245009
    Beverleyh
    Participant

    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.

    #245010
    Beverleyh
    Participant

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

    #245022
    giudev
    Participant

    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>
    
    
    #245023
    ameo
    Participant

    Thank you all, especially Beverleyh for that much effort.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.