www.webdeveloper.com
Results 1 to 5 of 5

Thread: Padding Not Applied Consistently from Browser to Browser

  1. #1
    Join Date
    Jun 2006
    Location
    Under your bed
    Posts
    357

    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?
    The better I get at programming, the more I appreciate arrays. Handy dandy things they are.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,138
    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.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2006
    Location
    Under your bed
    Posts
    357
    Yeah, I am. I just didn't want to paste the whole HTML page. It's got this one: <!DOCTYPE html>
    The better I get at programming, the more I appreciate arrays. Handy dandy things they are.

  4. #4
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154
    <!DOCTYPE html> is HTML5. Legacy browsers won't understand this.

  5. #5
    Join Date
    Mar 2011
    Posts
    1,138
    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).
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles