CODEWITHSUNDEEP
htmlcssfirefox
Dan382
Dan382

Reputation: 986

Display table layout broken in Firefox

Tried this in every major browser (Chrome/Safari/IE/Edge) and Firefox. Works in everything but Firefox where the text gets nudged down.

.auto-height {
display: table;
height: 100%;
}
.full-height-section {
display: table-cell;
height: 100%;
width: 49%;
background-image: url("https://preview.ibb.co/iNcv0f/ladysquats.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.half-content {
width: 100%;
height: 100%;
vertical-align: top;
padding: 60px 30px;
}
.half-content h2, .half-content p, .half-content ul {
text-align: center;
}
.half-content .img-size-payment-type {
width: 65%;
}
button.colour-dark-pnk, button.colour-light {
font-size: 1em;
margin-top: 25px;
padding: 10px 60px;
border: 0 solid #f4a2a4;
border-radius: 0;
cursor: pointer;
}
}
<div class="how-works-section-six-container auto-height mobile-screen-hide">
<div class="full-height-section">
</div>
<div class="section-six half-content">
<h2>IPSUM LOREM</h2>
<p>  <img class="img-size-payment-type" src="https://preview.ibb.co/f0Ea0f/metodos-pago.png"><br>
  <a href="/shop"><button class="colour-dark-pnk">Order now</button></a></p>
<h2 class="font-colour-dark-pnk">Test Title</h2>
<p>Ipsum Lorem Ipsum Lorem:</p>
<ul class="box-pnk">
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
</ul>
</div>
</div>

What it looks like in FF: enter image description here

What's even weirder is that the problem disappears as soon 'Inspect Element' is used, meaning it's very hard to see what's going on. Looks like an actual Browser bug?

Upvotes: 1

Views: 184

Answers (1)

Bhaskar Choudhary
Bhaskar Choudhary

Reputation: 159

http://jsfiddle.net/c3bfzLhj/

Change all height:100% to min-height:100% This is a Firefox bug. I had faced this problem two weeks ago while working on my web app.

Upvotes: 1

Related Questions