Browser Inconsistencies - Padding [FIXED]

I can’t figure out what the deal is with these render inconsistencies. The padding on my content container is 5%. Even when I check the element in FireBug it shows that, but Firefox is essentially eliminated the padding on the top and bottom, but keeping it on the sides, even though it’s all just defines as padding:5%;.

The site can be seen here: http://www.liquidwinter.com
I’ve attached screenshots below:





FIXED. It appears that the browsers are calculating % differently. Firefox only used it for the sides, not top and bottom. Edge somehow came up with a negative number. I checked it with both pixel values and rem values and the problem went away.

You might want to take a closer look at what the user agent style sheet is doing around padding, they’re often different. A start point for you might be to incorporate something like Eric Meyer’s CSS Reset into your thinking. Its aim is to act as an override for much of what the user agent stylesheet is doing, and set all browsers to as near a common baseline as is possible.

Vertical percentage padding on flex items are treated as zero in Firefox and although there is a bug report for it Firefox actually follows the specs as they allow for both cases.

Generally though vertical percentage padding and margins should be avoided as they refer to the width of the containing block and not the height of the container and will prove awkward in most cases.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.