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

Question

A few days ago I re-skinned my website. Development of this skin was primarily done using safari, and as expected, it all renders fine using firefox and opera. I\'ve had to make

Answer 1

Adding a specific height to .title fixes it for me (in IE6):

.title {
    PADDING: 0 10px 0 0; MARGIN-top: 0.3em; FLOAT: right; height: 1em;

Answer 2

Try adding overflow: visible; to your .postdate class. Maybe that helps.

Answer 3

I had a similar problem. I changed my span to a div and the problem was resolved. I think IE7 might have an issue processing line-height on a span. Haven't confirmed that to be the issue. There were other CSS elements. (Working on someone else's code.) But changing from span to div (block) resolved the issue.

Answer 4

In my experience its invariably the bottom of the text that gets clipped and that too basically because of the overlapping divisions. If you are able to ensure that the divs don't overlap then the issue does get resolved . That apart adding overflow: visible does help at times.

Answer 5

I think the problem is with the padding. I tried removing a "padding: 3px" style and it worked properly. Previously it was not showing anything. Paul Hart's answer showed me that.
Probably also removing/overriding margin properties may also help.

Answer 6

There's a hack I figured out that fixes the problem of cutting off text in IE. I noticed the last line in my headline was the only one being cut off.

My original CSS which was cutting off the last line in IE7 but looked fine in other browsers:

h2 {
   font-size: 22px;
   line-height: 1em;
}

See image of problem here: https://skitch.com/pablohart/f4g3i/windows-7-x64

The fix I did included simply adding padding to the bottom and then taking that padding back with negative margin. Like this:

h2 {
   font-size: 22px;
   line-height: 1em;
   padding-bottom: 5px;
   margin-bottom: -5px;
}

See picture of fix in this image: https://skitch.com/pablohart/f4g4h/windows-7-x64

The problem with line-height: normal; is that it takes on the default line-height for the font, usually 1.3em.