Why is my text being cut off in IE7?

Question

The text on my web page looks fine in Firefox & Safari, but in IE7 certain portions are cut off. It looks like (but it hasn\'t) it has been placed in a smaller elem

Answer 1

I had the same problem for IE9 and spent a lot of time fiddling around with the attributes for "height", "line-height" and "padding". Here's what I came up with:

(a) "height" does not affect what's happening inside the textbox;

(b) "line-height" does affect the display of the text and will cause it to be higher or lower in the text box, but the number is important. In the end the first answer seems to be correct i.e. set "line-height" to the same number as your font size;

(c) "padding" also affects the display of text because it creates the space between the borders of the textbox and the text itself;

(d) "vertical-align" provides a reference point for the text inside the textbox.

So, as an example, I got the text to display in the mid-line of the textbox on my site (with no cut off) and a nice distance from the textbox borders by using the following CSS in relation to the "input=text" area of my CSS style sheet:

   line-height: 14px; padding: 6px 2px 6px 2px; vertical-align: middle;

The 14px was the size of the font used in my template (stated elsewhere in the CSS style sheet), the 6px is top and bottom padding respectively and the 2px is the left and right padding respectively. The vertical align attribute places a notional middle line through the text. Obviously you can change any of those numbers to suit your requirements.

BTW, for newbies, use the firefox "firebug" plugin to find the code in your CSS syle sheet that needs changing. Just highlight the text box in question and on the right it will give the name of the CSS style sheet its location and line number where the code appears. You can even use "firebug" to do a live test run which will show you the effect of the changes, but which will not be saved when you close your browser : )

Hope this helps.

Answer 2

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

Overflow: auto;

Or

Overflow: Visible;

Answer 3

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

CSS

h1 {
   font-size: 2em;
   line-height: 2em; /* or 100% */
}

See also IE7 is clipping my text. How do I adjust its attitude?