Bug in CSS in IE 5.5+

If you look at these two CSS statements you'll notice that they look fine in Firefox/Safari. But in IE 5+ you'll get a different result, this is still an issue when using IE 7!

.iesafe {  
	font:normal 11px Verdana, Arial, Helvetica, sans-serif;
	border-top: solid 1px #666; 
	border-bottom: solid 1px #666; 
	margin-top: 0px; 
	background: lightgrey; padding: 3px;}

.iebad {  
	font:normal 11px Verdana, Arial, Helvetica, sans-serif;
	border-top: solid thin #666; 
	border-bottom: solid thin #666; 
	margin-top: 0px; 
	background: lightgrey; padding: 3px;}

Examples:

This content will look good in IE 5+ because it using the .iesafe class

This content will look bad in IE 5+ because it using the .iebad class. The top and bottom borders will appear thicker than desired.

Obviously if your using Firefox or Safari, you won't see anything different between the two examples.

This is what the above looks like in IE 7:
Badieborder

Summary:

By using 1px instead of 'thin', web developers can ensure consistent look and feel between various browsers.

I put this page together as a reference to other web developers. Hopefully it helps someone else with issues using CSS Borders in IE.