CSS Tips – Get Consistent Results in All Browsers

Web standards are prevailing guidelines used on the World Wide Web to ensure websites 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.

Check Our Portfolio