Cross Browser CSS

The four main browsers these days are:

Of these the last three closely follow the current web standards while Internet Explorer 6 is about 6 years behind and Internet Explorer 7 is about 4 years behind.

To create pages that look and work the same across the different browsers the first thing to do is to ensure that your pages are coded to the standards. You can do this by using the official HTML validator. There is also a validator on that site for validating stylesheets.

If you make sure that your page uses valid code and has a DOCTYPE as the very first thing in the page then you maximize your chances that all browsers will display the page the same way.

Different browsers have different default margin and padding sizes so specifying the following in your stylesheet will rectify this:

body {margin:0;padding:0}

Once you have done that then your page should display the same in Firefox, Opera, and Safari. It may or may not look the same in Internet Explorer. If it doesn't then the way to fix it is to set up a separate stylesheet specifically for Internet Explorer and link that into your HTML using IE conditionals immediately after the main stylesheet reference.

<link rel="stylesheet" type="text/css" href="main.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<[endif]-->

The IE stylesheet just needs those codes that are needed to override the content of the main stylesheet to fix the errors that Internet Explorer makes due to not understanding all of the valid stylesheet commands.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate