IE7 Is Clipping My Text. How Do I Adjust Its Attitude?

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 a f

Solution 1:

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.

Solution 2:

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

Solution 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.

Solution 4:

for the .bigdate class, try replacing margin with padding; seems to me that this has something to do with IE's margin-handling.

Solution 5:

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;