For those who build websites by hand (rather than on a platform like WordPress or Joomla) one of the hassles is making sure your sites render consistently in different browsers.
Internet Explorer is notorious for screwing things up, mostly because in the past they’ve never adhered to the W3C standards. That said, IE8 is better than previous versions.
However, there’s an easy step you can take that will address a large proportion of cross-browser rendering problems.
It’s not a complete fix, because some browsers still cannot handle some CSS attributes. But it will address most layout and spacing inconsistencies.
Assuming you create an external stylesheet to define the style and layout of your sites (and if you’re not then you should be), you can add this code right at the top:
Here’s the link to the text file containing the code, so it’s easier to copy.
What that does is reset all the default browser CSS values to zero, but only when it’s displaying your pages.
That means that the margins, borders, padding and other attributes you set to define layout and positioning will render consistently because they’re all starting from the same base (0 pixels).
It removes the problems caused when browsers have default CSS attributes defined. When these are defined they are added to any attributes you define in your style sheet when the page is displaid.
So if you set the right margin on images to be 10 pixels and the first browser has a default of 5 pixels for image right-margins, your images will render in that browser with 15 pixel margins to the right.
The next browser may have a default of 10 pixels – you can guess the rest.
As I said earlier, this is not a complete fix for cross-browser compatibility problems, but it will definitely help to make layout and positioning render consistently.
Cheers,
Other Articles You Might Like:
