Why Is My Text Being Cut Off in Ie7

Why is my text being cut off in IE7?

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?

Why is my text being cut off in IE7 and firefox from left side?

This is an issue with certain fonts on windows, specifically Verdana, from my experience. I spent about three days looking for float bugs and such to solve this, three years ago. It occurs mainly with the capital 'w' character, but can also be a problem with 'v' too, and only with cleartype disabled.

The best solution is to use text-indent:1px; on your paragraphs, if you feel you need to implement a fix.

Absolutely positioned text getting cut off in IE7

You are correct in that the height is 30px the font-size is 32px and the padding-top is 25px

SO the padding moves the text down 25px within that 30px height cutting off the all but the top 5px of your 32px font.

You will need to ajust the height to be 25px+32px = 57px instead.

EDIT: the real killer here is the line-height:14px though - so you only see 14px of the font.
LI.lp-ask-butn-sm A:link

SO line-height:64px and height:60px and padding-top:5px and it shows up

IE cuts off right side of text

Update: While this has not yet been resolved in Internet Explorer (or Microsoft Edge), I did want to revisit and share a potential work-around after having this question brought to my attention on Twitter by another engineer.

body {
  text-shadow:
    0 0 1em transparent,
    1px 1px 1px rgba( 0, 0, 0, .5 );
}

By setting two shadows (the first being much larger), the page is composed and painted differently. You can see the before and after by comparing the following URLs:

Before: https://jsfiddle.net/jonathansampson/96h9czc5/
After: https://jsfiddle.net/jonathansampson/96h9czc5/1/

Removing the <div> </div> also appears to resolve this.

I work on the Internet Explorer team and can confirm that this is a bug with Internet Explorer. For the time being, you could remove your (nearly-imperceivable) text-shadow and that should resolve the problem in Internet Explorer.

I have opened up a bug to track the resolution of this internally and will see to it that our Composition team has a look into the matter.

Text cutting off in Internet Explorer when using text-shadow

As I said in the comments, the negative letter-spacing is causing this issue. You might want to add some padding-right to the span, without having to adjust the letter-spacing nor text-shadow at all.

Why is IE7 cutting off the bottom of list items with this CSS?

It looks like the li elements are cut off by the ul element's height (23px):

ul.buttons { /* general settings */                        
margin-left: 0;                                               
margin-bottom: 0em;                                               
margin-right: 0;                                               
margin-top: .0em;                                               
float: left;                                               
height: 23px;  /* <--- here */                                             
text-shadow: 0px 0px;                        
text-align: left; /* set to left, right or center */ /* set margins as desired */ /* set font as desired */ 
list-style-type: none; /* THIRD number must change with respect to padding-top (X) below */ 
}

Most likely, the default overflow value differs in IE and Firefox. Can you increase the ul height to the 35px height of your li elements?

rohancragg commented with a good suggestion of using a CSS reset file to normalize browser CSS defaults - http://meyerweb.com/eric/tools/css/reset/.

I've just spotted the display: inline; on your li elements. height is ignored for inline elements and you should use inline-block instead.