fixing IE checkbox padding/margin

Support for CSS is built in to every modern browser so theoretically we shouldn't have to deal with too many layout issues. Unfortunately, a lot of browser specific quirks still exist. One I've dealt with recently is getting a checkbox to line up exactly to the left of a div. Setting the left margin and padding did not work in IE and I was going to try really drastic measures like setting float or absolute positioning until I found a really easy solution. To fix the extra padding for checkboxes in IE, we just need to give the checkbox a fixed width. I've summarized the results in the table with some screenshots. The markup I want to style is:

<div>
<p>some text before</p>
<input type="checkbox"/> checkbox 1<br/>
<input type="checkbox"/> checkbox 2<br/>
<p>some text after</p>
</div>

FireFox	IE	CSS	notes
		div {border: solid 1px #000;width:150px;} p {padding:0;margin:0;}	no styling on checkbox
		div {border: solid 1px #000;width:150px;} p {padding:0;margin:0;} input {padding-left:0;margin-left:0;}	style checkbox to have no left padding or margin. only Firefox behaves as expected
		div {border: solid 1px #000;width:150px;} p {padding:0;margin:0;} input {padding-left:0;margin-left:0;width:15px;}	added a fixed width and now IE7 looks fine too!