IE displaying header text differently

I just created a very basic CSS page, but I noticed IE is condensing the H1 text thus changing the layout. For comparison, I have included screenshots of my page in IE and Safari (Firefox displays the page the same as Safari). I would appreciate any help, as I've tried changing several values to no success.

Here is the link to my page

 

You have multiple things working against you. First, is IE's really lousy support for margin collapse. It just flat does it wrong. See http://www.satzansatz.de/cssd/onhavinglayout.html#uncollapse and follow the links there.

The other issue is the way you set the line-height. Using percentage means the leading is computed for that element, and descendants inherit the computed value. In this case, 140% of 14 px is 19.6, which, depending on the browser, will be 19 or 20px. Your 72px h1 font is stuffed into a 20px line. You can see this if you put a contrasting background color on h1.

Now, the fixes. For the line height, use a number, i.e. 1.4. The number will be inherited and used to compute each descendant's line height based on the element's font size.

Set the top margin of h1 to zero, then use top padding on the container to control separation. We shouldn't have to do such a silly work-around, but IE just isn't a very good browser, so …

cheers,

gary

 

I should have mentioned another alternative, and that's not triggering hasLayout in #container. Change your stylesheet like so:

@charset "UTF-8";
/* CSS Document */

body {
	background-color: #CCFF33;
	font-family: Helvetica, Arial, sans-serif;

}

a:link {
	color: #3333CC;
	text-decoration: none;
	font-weight: bold;
	}
a:visited {
	color:#333399;
	text-decoration: none;
	font-weight: bold;

	}
a:active {
	text-decoration: none;
	font-weight: bold;
	}
a:hover {
	color: #CC0000;
	text-decoration: underline;
	font-weight: bold;
	}

h1 {
  font-size: 72px;
  letter-spacing: -6px;
  color: #003300;
  text-align: center;
  }

p {
  font-size: 14px;
  }

#container {
  margin: 0 15%;
  line-height: 1.4;
  padding: 20px;
  border: 5px solid #99CC33;
  background-color: #99FF33;
  }

Code (markup):

And, get rid of the align attribute. It's neither needed nor valid in that usage.

cheers,

gary