We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Firefox Quantum ignoring a column's top and bottom CSS padding

SueMOZ
SueMOZ
more options

I am developing a site and when I see it in Firefox Quantum the top and bottom padding of a column is ignored.

I have attached 2 screenshots, comparing Firefox Quantum and Chrome.

Web Developer>Inspect (CTRL+SHIFT+C) shows the correct CSS (padding top and bottom 3%), but only left and right padding (also 3%) are displaying. The top and bottom CSS settings are being ignored.

I am developing a site and when I see it in Firefox Quantum the top and bottom padding of a column is ignored. I have attached 2 screenshots, comparing Firefox Quantum and Chrome. Web Developer>Inspect (CTRL+SHIFT+C) shows the correct CSS (padding top and bottom 3%), but only left and right padding (also 3%) are displaying. The top and bottom CSS settings are being ignored.
Attached screenshots

All Replies (3)

Shadow110
Shadow110
more options

Interesting, have you run the code through W3C.org HTML https://validator.w3.org/ and CSS https://jigsaw.w3.org/css-validator/ and Unicorn https://validator.w3.org/unicorn/ Just to see. I find if follow the W3C standards and practices it will be the same in any browser. If that is the case I would suppose Developer is off somewhat and maybe a bug report needs to be filed.

There are ways to correct that that I do not know if above url's do not help you.

Please let us know if this solved your issue or if need further assistance.

SueMOZ
SueMOZ Question owner
more options

The issue is in Firefox. It does not follow padding-top and padding-bottom in percentages.

I had to change it to pixels.

I originally had: padding: 3% 3% 3% 3%; Firefox only shows the padding on the left and right.

I had to change it to: padding: 30px 30px 30px 30px

The problem is that using pixels instead of percentages I will have to set many media querries to adjust for different screen widths.

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
more options

Firefox is rather picky about percentage measurements in some contexts. For example, if the height of the parent element is not defined, then a percentage of that height is considered undefined.

But percentage padding-top/padding-bottom should work on block or inline-block elements. Could you check the Computed style to see whether the gray box is display:inline instead of block or inline-block?