DEVseo

During the creation of web pages the most difficult task set forth before any web developer is that of cross-browser compatibility. Internet Explorer, Mozilla Firefox, Opera, Safari and so forth, have their own default margins and padding for certain elements on the page, and the page itself. This means that when building a web site there are going to be differences between browsers in terms of display and layout.

The Universal Selector is not as widely known as many of the CSS selectors because of the fact that you never see it in the HTML document anywhere and yet it does apply to everything contained there. Because of each separate browsers tendency to adds it's own padding and margins to a lot of the elements found in HTML, such as the heading tags, h1, h2 h3, h4 etc. differences can be very noticeable between them in terms of layout and positioning of objects and dividers.

Internet Explorer is one of the worst culprits (are you surprised?) and tends to add it's own to most of the HTML attributes used for layout, such as the HTML and BODY elements. Firefox, and I'm sure the other browsers, do as well simply because a style sheet is built in to each defining link colours and font-sizes and such. However, in order to create effective cross-browser compatible web pages you may well wish to "zero out" all of this browser-own padding and margins in order for each browser to more strictly adhere to the style you want for your site. Of course, the other way to do this would be to add padding and margins set to zero in each of the HTML elements you are editing as you go. But this will add unnecessary bulk and length to your style sheet.

What does the selector look like and how do I use it?

The Universal Selector looks like the following:

* {
margin: 0;
padding: 0;
}

The asterisk basically means everything on the page. In setting the margins and padding to zero we have effectively removed the largest chance for Internet Explorer to mess up your web pages. Such a simple selector can be a lifesaver when it comes to more tricky, or in-depth designs. I remember one of my earlier projects being to build a web site for a plane company and the template I was handed to turn into a web page was very complex having a repeating double-line, two-shaded black background throughout the whole site. Lining up the dividers and images to these lines caused so much grief because if they looked right in one browser, they looked wrong in another!

Then I learnt of the Universal Selector and as soon as I implemented it both sites had the same background position and so fit together the same in each browser. I think, because of Internet Explorer adding padding to the body portion of the web page the background image was always just one or three pixels lower than it would be on another browser, such as Firefox. In removing the padding from IE and Firefox they displayed the same! Such a small solution to a problem that had made me rack my brains for days!

Each and every time I create a new web site, the Universal Selector is the first thing to be found on my style sheets, because, in my opinion, it makes the world of different in tweaking Internet Explorer and Firefox to looks the same and requires very little extra coding to do just that.

One important factor to remember when using this method, however, is that it will also zero out every single margin of every other element of your style sheet, including the <p> tag, forms, tables, lists and everything else that once had it. To combat this you probably don't need to add and padding or margins to most of the elements, unless you use them on your site, such as <p>, which can be written in your style sheet as:

p {
margin: 12px 0;
}

Some people prefer to simply remove the padding and margins on the more obvious of elements such as HTML and BODY, which is fair and leaves there no need to add the padding and margin back to any elements. But I find that problems occur from parts of the HTML that I didn't even know had any padding or margins and rather than apply to them as I find them and remember them for next time, just apply to everything and add to those that you use. It's simpler to keep track of the things you need padding for as they are probably a little more obvious than those tiny bits that mess up your pages that you just can't find!