constellex

Web development is hard. No, it’s not server side applications, web services, HTML, or even *gasp* AJAX. It’s dealing with browser inconsistencies. For any novice web developer you know the drill, you create your web page and test it in your browser of choice. Then about half-way through completion you decide you should probably test it in those other browsers. Doh. Doesn’t work. But you followed all of the web standards and you even pass the W3C Validation test.

So what’s the problem? Well, there could be a number of issues, but one of the biggest contributors is the often forgotten about browser default styles. Yes, even when you build a site without any styles each browser applies its own style sheet at the most base level and unless you override those styles, they may be slightly different from browser to browser.

Solving that problem is actually rather simple and there are some clever solutions available. You need to essentially override all styles that are defined by the major modern browsers in your web page’s stylesheet. One solution that works particularly well available from the site linked above and originally from Left Justified:

* {
     padding:0;
     margin:0;
}
body {
     padding:5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl,
fieldset, address {
     margin:20px 0;
}
li, dd, blockquote {
     margin-left: 40px;
}
fieldset {
     padding:10px;
}

Essentially you are overriding the margins and padding of all elements and then redefining them for individual elements. This starts you with a nice clean slate across all browsers and hopefully less headaches down the road.