I've got a problem with IE 6/7 cutting off the upper and lower portions of my header text on some of the pages for the website I help manage. It seems to happen somewhat randomly, and the part that gets cut off is also different (sometimes it's both the top and bottom, while sometimes it's one or the other). A few times just getting rid of the "grid" class on the div the header is located in fixes the problem, but other times (as is the case with the example link I've provided), it does not. Any ideas as to what the issue could be? The headers display fine in just about any other browsers I've viewed them in (Firefox, Chrome, and Safari).

2 answers

Emily G 620
This was chosen as the best answer

You have line-height defined as 1.65em on <body> at line 1 of your CSS.

line-height should be unitless especially if you are setting it on body.

If line-height does not have a unit (px, em, ...) it is a multiple of the font size.

body {font-size: 12px; line-height:1.5;}
h1 {font-size:24px;}

The line-height for body will be 18px and for h1 it will be 36px.

If you specify a unit, it is a static value

body {font-size: 12px; line-height:1.5em;}
h1 {font-size:24px;}

Then the line height will be 18px for body and h1 which can cause some unintended consequences.

Answered over 7 years ago by Emily G
dave 30

The problem seems to be that the h1's line-height is not correct. It is 21px and your font size is 42px.

Answered over 7 years ago by dave