CODEWITHSUNDEEP
cssfirefox
forrest
forrest

Reputation: 10982

How to a get padding to display the same in Firefox and Chrome?

I have a web page with a text box. The background is black and the text is white. It displays correctly in Chrome and Safari, but for some reason the display is way off in Firefox. For arguments sake that could be reversed, that it is correct in Firefox but not Chrome or Safari - I am just going with the majority for now.

Here is the HTML:

<div class="col-sm-6 black">
  <p style="text-align:center">Each unit is full of character and convenience with original hardwood floors, 10&rsquo; ceilings, washer/dryer and walkability to local restaurants and shops.&nbsp;</p>
  <p style="text-align:center">Rents range from $825 &ndash; $950/month.</p>
  <p style="text-align:center">Call us to reserve your unit:&nbsp;</p>
  <p class="estilo big" style="text-align:center">919-292-2200</p>
  <p class="estilo" style="text-align:center">or through Facebook messenger.<br />
  facebook.com/thelutterloh</p>
</div>

Here is the CSS:

.black { background-color: #000; padding: 15px 15px 65px 15px; }

This is how it looks in Chrome and Safari:

enter image description here

This is how the same code renders in Firefox:

enter image description here

I have looked extensively for a solution and have have seen nothing that would resolve this. Also, Mozilla does not have a -moz specific styling that can be applied.

Any help would be appreciated.

Upvotes: 1

Views: 42

Answers (2)

Aaron Cannon
Aaron Cannon

Reputation: 71

You can also use @font-face which will help keep your font consistent between browsers instead of the browser using its default. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Upvotes: 1

Rocks
Rocks

Reputation: 1155

The inconsistency in the font-size seems to be causing the height of the .black div to increase in case of firefox (since the font-size appears to be higher). The padding added on top of this increases the total height of the div. I would recommend using normalize.css or CSS resets before doing any of your styling to avoid such scenarios.
Another workaround is for you to set box-sizing: border-box and set a max-height on the .black div., along with overflow:hidden.

Upvotes: 2

Related Questions