How to Create Cross Browser Pixel Perfect Layouts With CSS and a Reset

When people hear the words CSS, they often freak out especially if they come from a Table based background. But please, don’t be scared. It’s a nice world to be in once you get the hang of it. With the tips below, I hope to give you some baby steps in creating cross-browser friendly CSS tips so your websites look the same in any web browser.

Star-Selector Reset

To start off, we want to begin our CSS document with what is known as the star selector (*). Your code will be this simple:

* {margin: 0px; padding: 0px;}

What that does is tell the web browser to interpret ALL HTML elements (h1, p, UL, LI, etc…) to have NO padding and NO margins. It’s literally a global reset.

Now, in your css when you give an element a particular MARGIN or PADDING, every browser that reads it will adhere to those rules. By default, every browser has its own DEFAULT method of handling the margins and paddings, which throw your layouts off from browser to browser.

Using a second set of divs for padding

Another method I use to deal with margin/padding issues across browsers is when there are 2 containers floated side by side, and you give padding to them. Internet Explorer will treat this differently then say Firefox. The key is to embed an extra pair of DIV’s inside the main containers, and apply the padding to those internal divs. Case in point: In the code sample below, 200px width will actually become 220px because of the 10px side padding.
Instead, you want the width to stay 200px, and the padding to apply inside. The solution is one extra DIV pair with the 10px padding applied like such:

I posted sample code on the Pastie Code website: pastebin.com/pgi2c4yb

So between the * selector reset and applying your box padding to an internal set of div’s, your cross-browser attempts will be much more successful.

Randall enjoys a wide array of personal interests, but mostly around web-design, golf, computers, and entrepreneurship.

He loves writing about his interests and helping other people. He also loves being a go-to person about various knowledge and topics, and hopes his writing will help you in some way.

Please check out Randalls latest golf project, a review of the TaylorMade R7 Driver where he also reviews other golf equipment.