Padding Not Applied Consistently from Browser to Browser

**evenstar7139** · 01-21-2013 07:16 PM

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?

**rtrethewey** · 01-22-2013 02:16 PM

Are you using a complete <!DOCTYPE> statement in your HTML? If not, search on "doctype switch" for information on using the correct <!DOCTYPE> to set browsers to Standards Compliance Mode.

**evenstar7139** · 01-22-2013 08:21 PM

Yeah, I am. I just didn't want to paste the whole HTML page. It's got this one: <!DOCTYPE html>

**Javaboey** · 01-25-2013 04:12 PM

<!DOCTYPE html> is HTML5. Legacy browsers won't understand this.

**rtrethewey** · 01-25-2013 06:22 PM

It's not strictly true that older browsers won't understand the HTML 5 <!DOCTYPE>. The HTML 5 <!DOCTYPE> does put all browsers in Standards Compliance Mode, which is a godsend, but (of course) older browsers won't natively support the new features of HTML 5 (or much of CSS3).

Thread: Padding Not Applied Consistently from Browser to Browser

Thread Tools

Display

Padding Not Applied Consistently from Browser to Browser

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions