Web design is, thanks to the low homogeneity and the lack of agreement between web browser programmers, more an art than a profession. It seems to be as much criteria and interpretations of the box model as there are browsers.
That makes difficult for a designer to achieve a uniformity in the display of information on the web. It makes us feel like jugglers. When you make a page look good on a browser it breaks completely on another.
The way each browser interprets style sheets is a subject of regular study by web designers. If we search the web for the subject we’ll find plenty of tips and hacks to make our pages follow the same rules, or at least similar rules, when they are displayed on different browsers and operating systems.
Even so, if we manage to tame the beasts, our web pages will look slightly different for a reason that isn’t always mentioned on these tips and trics sites: the browser’s default style sheet.
When we start a new site, and apply the first styles to a XHTML file, the parameters that guides the way the page is shown are not the same. I mean, it’s not true that all the parameters are set to the same values on different browsers, they are not even set all to 0. Each browser has certain values, that changes in certain ways, depending on browser an OS.
As an example: On Firefox, Windows, when you have a H1 as the first element of a page, it has the same value for the top and bottom margins of the box, creating a white space before and after the heading text.
On Internet Explorer 6, the H1 as first element of a page has a value for the bottom margin (though, different from the FF value) and a value of 0 to the top margin of the box. When the H1 isn’t the first element it behaves similarly in IE and FF, but with different margin values.
The values that usually change are text box margins (for block type elements) and the line height value.
If our aim is to get a similar display of the page from one browser or one OS to the other the only choice we have is to rewrite explicitly all the values that change it the browser’s default stylesheets. It’s a tiresome task, but fruitful.
To save time the best strategy would be to the following: before we start to apply styles to the page we can apply a normalizing styleshett, that overwrites all the values that change from one browser to the other, in order to standardize the way the elements are displayed.
Once we have that settled we can start with the page’s stylesheet, overwriting values of the normalizer CSS if necessary.
At this time I’m creating a normalizer stylesheet for different browsers, but to finish it I’ll need the help of more people, specially web designers with access to different PCs with different Operating Systems and browsers. If you want to help me just leave me a comment. Once we finish it we’ll release it to the community, to be used in all of your projects.
Thank You