Why is Firefox not accepting bottom % padding values?

Question

I have problems with inconsistent looks between Chrome and Firefox. To my surprise, even after using reset.css I still have the same problems; it's like Firefox is not using any of the padding that are set in "%", if I set the padding in pixels then it does work.

W3 validator came out clean.

My problem:

Right side is Firefox, and that's after using reset.

This is the style of the div:

.hobbies {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 5% 10% 15% 10%;
  background: #66B9BF;
  color: #373737;
}

In Chrome, the padding is what stretches the div, but that's not happening in Firefox.

.me-wrap {
    display: -webkit-box;
    display: flex; 
    flex-wrap: wrap;
    padding: 3%;
    background: #373737;
} 
.hobby-title {
    margin-bottom: 5%;
}
.hobbies {
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 5% 10% 15% 10%;
    background: #66B9BF;
}
.hobbies-icons{
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.icon {
    font-size: 45px;
    width: 80px;
    height: 80px;
    background-color: #373737;
    border-radius: 100%;
    line-height: 80px;
}
.icon-text {
    font-size: 16px;
    line-height: initial;
    margin-bottom: 2%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="me-wrap">   
    <div class="hobbies">
        <h1 class="hobby-title"> Hobbies/Interests </h1>
        <div class="hobbies-icons">
            <div class="icon"> <i class="fa fa-paw" aria-hidden="true"></i>
                <p class="icon-text"> Animal lover </p>
            </div>
            <div class="icon"> <i class="fa fa-code" aria-hidden="true"></i>
                <p class="icon-text"> Code enthusiast </p>
            </div>
            <div class="icon"> <i class="fa fa-bicycle" aria-hidden="true"></i>
                <p class="icon-text"> Exercise practicioner </p>
            </div>
            <div class="icon"> <i class="fa fa-gamepad" aria-hidden="true"></i>
                <p class="icon-text"> Videogame aficionado </p>
            </div>
            <div class="icon"> <i class="fa fa-hand-spock-o" aria-hidden="true"></i>
                <p class="icon-text"> Geek culture adherent </p>
            </div>
            <div class="icon"> <i class="fa fa-leaf" aria-hidden="true"></i>
                <p class="icon-text"> Outdoor nut </p>
            </div>
        </div>
    </div>
</div>

can you provide a basic example in jsfiddle or similar, displaying the issue? You may have conflicting styles elsewhere. — seemly, Jan 08 '17 at 19:03
I'm afraid the code is too large, I guess I was looking to know if this was a known issue caused by X. — Sergi, Jan 08 '17 at 19:07
We need to see a [mcve] of this. At the very least we need to see the HTML of the affected element and its parent, as well as any CSS for the element and its parent that affects layout. — TylerH, Jan 08 '17 at 19:10
A few things: 1) you might want to recheck your W3 validation; you can't put divs in p tags. 2) The behavior is identical on FF and Chrome insofar as left- and right-padding are concerned, so I clarified in your question about bottom padding, which is the only difference. 3) This is a good complete and verifiable demo, but it's not minimal. Try to reduce the code to just the parts needed to reproduce the behavior of the icons with the padding problem. — TylerH, Jan 08 '17 at 20:30

score 0 · Answer 1 · answered Jan 08 '17 at 19:14

This appears to be an issue that could be resolved by using an overflow: hidden; on the container that has the blue background and the fat grey border. Rather than being an issue with the hobbies class itself, it appears to be a problem with one of the parent containers. As one of the other commenters said, please post a bit more code and we can probably help out more.

Why is Firefox not accepting bottom % padding values?

1 Answers1