As a webdesigner, one of the struggles I face on a daily basis is making my pages appear the same in as many browsers as possible, mainly Internet Explorer and Firefox. Trying to adhere to W3C standards and making the pages look and act the same can be a frustrating, time-consuming process. When using tables to do layouts, it was fairly cut and dried (with the odd gaps appearing in Netscape), but using tables is a no-no (at least in the standards world. I admit, I’ve resorted to table based layouts when pressed for time. Bad Shad!). While building my current project for work, I was experiencing a problem where Firefox wasn’t showing my layout like IE was, and for a change IE was presenting the layout correctly.

One of the things to be aware of when building layouts purely in CSS, is that every browser will treat the HTML markup( p, h1, h2, br, strong ) differently. For instance, in Firefox, an H2 tag might be given a margin of 2px while in IE, it might be 5px (I don’t know the exact numbers). Suffice to say, the difference can be big. When doing the above said layout, I gave an H2 tag within the layout a margin of 0 and padding of 0. And that fixed the issue I was having.

Just thought I’d pass that along.