Why is my text being cut off in IE7 ?

Question

Note: I know the answer to this after a bit of searching and experimenting, so I'm posting it here for others sake.

The text on my web page looks fine in Firefox & Safari, but in IE7 certain portions are cut off. It looks like it has been placed in a smaller element with overflow: hidden;

Anyone know how to remedy this?

Answer 1

You need to specify the line height to match the font size...

Example

/* css */   
 h1 {
        font-size: 2em;
        line-height: 2em;
    }

See also http://stackoverflow.com/questions/634824/ie7-is-clipping-my-text-how-do-i-adjust-its-attitude

Answer 2

Try changing the overflow attribute for the element the text is in.

Overflow: auto;

Or

Overflow: Visible;