One of the biggest frustrations working as a Website Designer is getting Websites to look the same on all devices. It’s essential to test Websites, prior to go-live, on all combinations of popular Internet Browsers and hardware. Major Internet Browsers include Google Chrome, Mozilla Firefox, Microsoft Internet Explorer, Apple Safari and Opera for computers. For mobile devices it’s necessary to test in Chrome for Android, Firefox for Android, Safari for iOS, Opera Mini and Opera Mobile, Dolphin etc. And then there are the combinations of hardware and Operating Systems which I won’t even try to list. Basically there are a massive number of combinations which to test against and unfortunately a Browser may display content differently when running on different Operating Systems … anyway, I’m sure you get the point I’m trying to make.
Remove Firefox Margin/Padding
A Firefox rendering problem I’ve come across before came to my attention again a few days back so I thought I should share how to resolve this issue (some may argue that Firefox is actually displaying the element correctly and the other Browsers are incorrect). The problem is that Firefox shows a margin/padding at the top of an element e.g. in CSS this looks something like margin-top: 20px; . In Chrome, Safari and other Browsers the margin-top doesn’t show but in Firefox it does. Even trying to override the top margin with some CSS like margin-top: 0px !important; doesn’t remove the margin.
CSS to the rescue
Well here is the very simple fix. Just insert the following CSS using the Class or ID where the unwanted margin is showing (in WordPress you’ll need to insert the CSS into stylesheet.css)
Now, you’ll notice that the display is the same on all devices 🙂