Firefox Quantum ignoring a column's top and bottom CSS padding
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.
All Replies (3)
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.
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.
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?