Why is my text disabled in IE7?

The text on my webpage looks great in Firefox and Safari, but some parts are disabled in IE7. It looks (but it doesn’t) was placed in a smaller element with overflow: hidden; .

Does anyone know how to fix this?

+7
css internet-explorer-7
source share
3 answers

You need to specify the height of the line so that it matches the font size ...

CSS

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

See also IE7 truncates my text. How to adjust his attitude?

+31
source share

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

(a) "height" does not affect what happens inside the text field;

(b) "line-height" affects the display of the text and will cause it to be higher or lower in the text field, but this is important. In the end, the first answer seems correct, that is, set the "line height" to the same number as the font size;

(c) "padding" also affects the display of text, since it creates a space between the borders of the text field and the text itself;

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

So, as an example, I got text to display in the middle line of the text field on my site (without cropping) and at a great distance from the borders of the text field, using the following CSS in relation to the "input = text" of my CSS stylesheet:

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

The size of 14px was the size of the font used in my template (indicated elsewhere in the CSS stylesheet), 6px is the top and bottom padding, respectively, and 2px is the left and right padding, respectively. The vertical alignment attribute places the conditional midline through the text. Obviously, you can change any of these numbers to suit your requirements.

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

Hope this helps.

0
source share

Try changing the overflow attribute for the element that contains the text.

 Overflow: auto; 

Or

 Overflow: Visible; 
-2
source share

All Articles