I was practicing making some alert boxes when I noticed that IE 6 and 7 were putting more padding around the alert body than were later versions of IE. I'd like to fix this inconsistency.

IE 6 and 7: http://i22.photobucket.com/albums/b3...ar7139/fat.gif
IE 8: http://i22.photobucket.com/albums/b3...139/skinny.gif

CSS:
Code:
* {
	border-radius: 6px;
}
html {
	font-size: 100%;
}
body {
	font: normal normal normal 62.5%/1.5 Verdana, Geneva, sans-serif;
}
.alert_wrapper {
	width: 550px;
	background: black;
	border: 2px solid black;
	margin: 0 auto;
}
.alert_header {
	background: #a62f26;
	height: 50px;
	margin-bottom: 2px;
	font-family: Trebuchet Ms, Arial, Helvetica, sans-serif;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	line-height: 50px;
}
.alert_body {
	background: #dacea4;
	text-align: center;
	padding: 14px 10px;
	font-size: 1.2em;
}
HTML:
Code:
<div class="alert_wrapper">
	<div class="alert_header">
   Whoops!
   </div> <!-- end: alert_header -->
   <div class="alert_body">
   <p>You have come here from the wrong place.</p>
   </div> <!-- end: alert body -->
</div> <!-- end: alert_wrapper -->
How do I make it consistent?