Web standards are prevailing guidelines used on the World Wide Web to ensure web sites and information is accessible to all in the most efficient manner. Most Web browsers have different default settings for the base margin and padding.

This means that if you don’t set a margin and padding on your body and xHTML tags, you could get inconsistent results on the page depending upon which browser your users are using to view the page. A simple way to solve this is to set all the margin and padding on the xHTML and body tags to 0:

html, body {
margin: 0px;
padding: 0px;
}

This will keep your design structure in the same place on all browsers.

Borders

You may be thinking “but no browsers have a border around the body element by default”. This is not strictly true. Internet Explorer has a transparent or invisible border around elements. Unless you set the border to 0, that border will mess up your web-page layouts. So add the following to your body and xhtml styles:

html, body {
margin: 0px;
padding: 0px;
border: 0px;
}

Here’s a nice and detailed article on CSS Reset: Resetting Your Styles with CSS Reset Stay tuned for more web-design tips.

Author: CSSJockey

Mohit is a freelance web designer/developer based in Chandigarh India. He founded CSSJockey.com on Jan 01, 2009, since then he is serving clients from all over the world. Follow on Twitter | Connect via Facebook | Read more »

5 Responses to “CSS Tips – Get Consistent Results in All Browsers”

03 May, 2009

Banago says:

I use and I think is better to use this piece of code:

* { padding: 0; margin: 0; )

28 Apr, 2009

Tim says:

This is a really informative site.

25 Apr, 2009

CSSJockey says:

And when you’re using a Reset Stylesheet, make sure you link it before your own custom Stylesheet when doing the (x)HTML of the website. I have seen several people posting in forums about their stylesheets not working at all. And in the end, the only issue that appears is that they had invoked the reset stylesheets after their own custom stylesheet!

25 Apr, 2009

Cody says:

I go even further when resetting css. I make a separate css file that pretty much resets all elements of html. The only elements I leave out is the ones I’m not going to use for the project. Then use a different css file to do my designing in.

24 Apr, 2009

Abhinav Sood says:

Resetting your HTML styles is the most basic and one of the most important thing to do when developing a website. Overlooking this is the root of several ugly websites that litter the web and break across different browsers.

In addition to the above, I generally use these with the HTML and BODY tags:
font-size: 100%; vertical-align:baseline; background: transparent;

Is helpful in cases when users have styled their browser (background color, larger font size, etc.) or some browser skins that may change the appearance of a web page.