As we all know, different browsers display different code. That line must feature somehow in nearly every article on this site and give us as web designers more work to do. One way to try and cut down on the work we do, is to apply the same rules to most of the, what I would call, generic elements, to make sure each browsers start at, if you like ‘0′.

Usually, when starting with a new site, the first rule you would apply would be:

body {
margin: 0;
padding: 0;
}

That makes sure that any default margin or padding is removed straight away. But, there are other defaults.

Although we cannot be certain, there are many elements that, potentially, have been applied some CSS by the browser. In my opinion, this would be:

• <p>
• <h1>
• <h2>
• <h3>
• <h4>
• <h5>
• <form>
• <blockquote>

Those would be some of the basic ones. There are probably lots more, but I’ll leave you to work that out. So, to make sure all our elements have no ’starting’ style, simply add them to the earlier code.

body, h1, h2, h3, h4, h5, h6, blockquote, p, form{
margin: 0;
padding: 0;
}

Now we can be sure of equality across all browsers when we start.

Another good thing to do, if one browser is adding a seemingly unknown top margin, is to add margin: 0; to the style. For example:
#Container has the following CSS:

#container {
width: 700px;
height: 400px;
padding: 0;
background-color: #009900;
}

Yet it is displaying, for some unknown reason, 10px below #header, which also has no margin applied.

A possible fix? Apply margin: 0; to both #container and #header. There is now guarantee it will work! But, before trying hacks or the like, it is one thing you can check.

Categorised under: Browsers, CSS, Design & Layout, Designing a Website by Jack F