“Browser Control” can be one of the toughest and most frustrating aspects of building a website with CSS.  The good news is it doesn’t have to be. Using the right tools and knowing what to avoid, your life can much easier building cross browser compatible websites.

This will be the first of a two part series about “Browser Control” using CSS.  Can every aspect be covered in a two part series? No, but what I will cover in this series are some simple tips and tools that will dramatically reduce your intake of Advil for those brutal headaches that some browsers cause (I won’t name names).

The first part will discuss the universal selector tool.  It is simple to use, takes about 10 seconds to implement in your style sheets and creates an even playing field when it comes to elements in your html document.

Here it is:

*{}

The asterisk applies any declarations inside the curly brackets to every element.  This makes it very powerful, and with power comes responsibly.  I generally only use it one time, place it at the top of my master style sheet, and only use these two declarations.

*{
margin:0;
padding:0;
}

The effect is now every element no longer has default margins and padding, setting all elements to 0, keeping them on the same playing field, at least when it comes to margins and padding (Which I see give people the most trouble in whipping a browser into shape).

Now you can apply margins and padding to only the elements that you specify. 

For example, paragraphs no longer have margins so we need to declare them.  I like to set my paragraph margins as follows:

p{
margin:5px 0px 10px 0px;
}

Using this selector is very simple, yet extremely powerful tool can save you so much time troubleshooting and just building the site, however if you get carried away with it, plan on buying some Advil.

The universal selector tool is by far one of my favorite tools in controlling how browsers render elements.  I was very fortunate to have picked up a CSS book early in my career that discussed it, and what a lifesaver it has been.

The universal selector tool is by no means a cure all to “Browser Control”, but it is the first step I take in for making every site rock solid.

In the next part of the “Browser Control” series, I will discuss how using left and right margins and padding play havoc with the box model(s), and why it is best to avoid using them for certain HTML elements.