Padding Not Applied Consistently from Browser to Browser
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?
