CSS Tips – Get Consistent Results in All Browsers

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:

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


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:

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

7 thoughts on “CSS Tips – Get Consistent Results in All Browsers”

  1. 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%;
    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.

    1. sina says:

      Great Buddy

  2. 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.

  3. 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!

  4. Tim says:

    This is a really informative site.

  5. Banago says:

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

  6. Gary Corbett says:

    Good tip, all designers should learn the need to reset default browser CSS styles, or the need for it after viewing their work across several browsers.

    P.S. Good site design!

Leave a Comment

Your email address will not be published.*