CSS Margins in Internet Explorer Vs. Firefox

A few tricks will help prevent CSS-related headaches.

Building a Web design with HTML and Cascading Style Sheets (CSS) is fairly straightforward, as long as you stick with one browser. Too often, though, when you view your perfect design in a different browser, you see ugly unwanted spaces or overlapping elements. Microsoft and Mozilla -- to say nothing of Apple, Opera and Google -- simply cannot agree on a default behavior for certain CSS properties, particularly padding and margins, so Web designers are almost always forced to employ workarounds and tricks.

Default Style Sheets

IE and Firefox each have default style sheets which they apply when no other style is present. In this way, a plain HTML page, of an ancient variety created before there was CSS, will still display text readably, having, for example, white space between paragraphs. The trouble is that different browsers have different default style sheets. In the case of the paragraph tag "<p>," IE displays a margin only at the bottom, while Mozilla displays margins at both the top and the bottom. To further complicate matters, other browsers use padding rather than margins to create white space between elements.

Overriding the Default

To remove the default behavior of any element in any browser, a designer simply has to explicitly set both its margin and padding to 0 at the top of the style sheet or HTML page. For example, to reset the paragraph tag, include the following:

p {margin:0;padding:0}

Now all paragraph elements will display no padding and no margin unless you explicitly set them.

Global Reset

One answer to browser inconsistencies with margin and padding is to rip everything out and start over. CSS offers a way to do this. At the top of your page or style sheet, simply include this declaration:

* {margin:0;padding:0}

Now, the white space declared by the browser's default style sheet will be removed for all elements. This will give you greater control over the appearance of your design in all browsers. Of course, it also means if you do want margins or padding between your paragraphs, or any other elements, you will need to put it there yourself with additional style declarations.

Drawbacks to Global Reset

While the global reset solution works perfectly well on most elements, there are some unwanted side effects. In Mozilla, buttons which were once animated when moused over or depressed will not be animated any longer. In order to restore any sort of effect, you will have to design and implement your own. Also, margins within drop-downs in Mozilla will disappear and will be difficult to restore without affecting the display in other browsers. Therefore, if a page uses a lot of form elements, it may be wisest to not use the global reset method, but a more selective reset of only the elements which are displaying improperly in some browsers.

Performance Concerns

Another possible issue with the global white space reset solution is performance. Since a global reset is applied indiscriminately to all elements on a Web page, even those which might already have margins set to 0 or whose default behavior is acceptable in both IE and Firefox, it is performing extra, unnecessary operations. While most of today's browsers are fast enough that a minuscule delay in page rendering will never be apparent to end users, some designers still feel like a global reset is overkill and recommend only resetting specific elements when their default behavior is causing issues.

References

• No Margin For Error