Sad Bird Design

I’ve been getting frustrated lately about my web design looking different in every browser. This is common, of course. Each broswer: FF, Safari, Opera, Chrome, and IE all have their own default margin and padding settings.

So if I make a header, main content, sidebar, and footer layout with no set margin or padding, the browser will set its own default setting. This is even more frustrating when text is introduced. The h1, p, li, and ul all have their own defaults. This creates unpredictable results. And I don’t like that, and I won’t stand for it.

I needed to find a common ground.

* {
	margin: 0;
	padding: 0;
	border: 0 none;
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
}
ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
	}

fieldset, img, abbr {
	border: 0;
	}

a, ins {
	text-decoration: none;
	}

p, h1, h2, h3, h4, form, span, img, blockquote  {
	padding: 0;
	margin: 0;
}

The asterisk at the top is the universal rule for resetting. All major browsers should recognize that rule and read it the same way. Do not reset any elements inside the “form,” for example: input, textarea, checkbox. etc. Form elements can act kind of crazy if you reset them.

Start your stylesheets with this bit of code and make your life easier. I must give thanks to Eric Meyer for pointing me in the right direction.

- Randy