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

When people hear the words CSS, they often freakoff from browser to browser.
out especially if they come from a Table basedUsing a second set of divs for padding
background. But please, don't be scared. It's a niceAnother method I use to deal with margin/padding
world to be in once you get the hang of it. With theissues across browsers is when there are 2
tips below, I hope to give you some baby steps incontainers floated side by side, and you give padding
creating cross-browser friendly CSS tips so yourto them. Internet Explorer will treat this differently
websites look the same in any web browser.then say Firefox. The key is to embed an extra pair
Star-Selector Resetof DIV's inside the main containers, and apply the
To start off, we want to begin our CSS documentpadding to those internal divs. Case in point: In the
with what is known as the star selector (*). Yourcode sample below, 200px width will actually become
code will be this simple:220px because of the 10px side padding.
* {margin: 0px; padding: 0px;}Instead, you want the width to stay 200px, and the
What that does is tell the web browser to interpretpadding to apply inside. The solution is one extra DIV
ALL HTML elements (h1, p, UL, LI, etc...) to have NOpair with the 10px padding applied like such:
padding and NO margins. It's literally a global reset.I posted sample code on the Pastie Code website:
Now, in your css when you give an element apastebin.com/pgi2c4yb
particular MARGIN or PADDING, every browser thatSo between the * selector reset and applying your
reads it will adhere to those rules. By default, everybox padding to an internal set of div's, your
browser has its own DEFAULT method of handlingcross-browser attempts will be much more
the margins and paddings, which throw your layoutssuccessful.