CSS Browser Compatibility Improvement Tip

Different browsers apply different default padding and margin to the <html> and <body> elements. If you don’t reset them, you’ll get unexpected whitespace that varies from one browser to another. The fix is to simply zero them out at the top of your stylesheet: html { padding: 0; margin: 0; } body { padding: 0; margin: 0; } This is the first rule I add to any new project.

6 June 2009 · 1 min · 69 words · Shafiq Alibhai

CSS fail

Never do this: position: absolute; left: 99px; It feels like a handy quick fix to shove an element where you want it, but it never actually works. The layout breaks as soon as the content changes, the screen resizes, or anyone else touches the code. I learned this the hard way more times than I’d like to admit.

11 May 2009 · 1 min · 58 words · Shafiq Alibhai