Cross Browser Issues: CSS Hacks, Understanding Compatibility

Why does my site look different in IE than in Firefox?

This is a common question in the CSS forums and web developer encounter this almost on a daily basis.

Fundamental Reasons: Margins and Padding

One of the main causes for the many positional differences between layouts in various browsers is due to the default style sheet each browser applies to give styling to certain elements. This usually involves setting default margins and padding to some elements to make them behave in a certain way.

For instance, paragraph (p) tags will have a margin applied to them so that each paragraph is separated by vertical white space and do not run into each other. The same applies to many other tags including heading tags (h1 etc). The problem occurs because the amount of margin (or padding) applied to these elements is not consistent across browsers.

On many occasions Mozilla/Firefox will add a top margin to the element as well as a bottom margin. IE will however only add a bottom margin. If you were then to view these two browsers side by side you would see that the alignment would be different due to the top margin applied by Mozilla which could make your design not line up as expected.

If you look in html.css(path:/usr/share/firefox/res/html.css), you’ll find all of the styles that make what we think of as “unstyled” documents act the way they do. Consider, for example:

area, base, basefont, head, 
meta, script, style, title,
noembed, noscript, param
{
display: none; 
}

That rule is why the head element and all its contents don’t appear in your browser (as well as all those other “invisible” elements). From a CSS standpoint, there’s nothing special about those elements as compared to others like div or ul. The fact that they’re traditionally “invisible” is irrelevant—but with that one rule, the tradition is preserved. You can always override the rule, of course; try style {display: block;} on a test document that contains an embedded style sheet and load it up in Firefox/Mozilla. It isn’t magic. It’s just a change from the usual way that documents are presented.

There is more to the presentation story than just html.css. In the same directory, you can find quirk.css, which is applied instead of html.css when the browser is in “quirks” mode. Another style sheet, viewsource.css, affects the presentation of any view source window. All the nifty color-coding happens as a result of that style sheet, which is applied to automatically generated markup that underlies the actual source you see.

What Can Be Done

Since we can never be sure whether the browser's style sheet has applied margin or padding to an element the only real option is to explicitly set the margins and padding ourselves. This way we can over-ride the default style sheet so that we know exactly how each element will behave in each browser.

As we don't really know what elements have default styling applied to them (across all browsers) we must set the margin and padding for every element we use. In most cases we are just talking about block level elements -- you do not need to do this for inline elements such as em, strong, a, etc which rarely have any margin or padding applied to them. Although em and strong will have some styling already applied to them to give them their strong and emphasized look.

Here is how you can reset the padding and margin of block elements when you use them:

1. 
   
   
   html,body{margin:0;padding:0}
2. 
   
   
   p {margin:0 0 1em 0;padding:0}
3. 
   
   
   h1{margin:0 0 .7em 0;padding:0}
4. 
   
   
   form {margin:0;padding:0}

Take the body element for example, and notice that we have included the html element also, and then we have re-set padding and margins to zero. As explained above, various browsers will apply different amounts of margin to the body to give the default gap around the page. It is important to note that Opera does not use margins for the default body spacing but uses padding instead. Therefore we must always reset padding and margins to be 100% sure we are starting on an even footing.