17

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 few small tweaks for IE7, but nothing much, except for one problem...

The date indicators for a post are cut off in IE. This problem seems to occur only on nested span tags inside a left floating div. I think I need the floating div's in order to layout text on the left and the right side of the screen.

Do any of you know how to stop IE7 from clipping my text?

Edit: I have sort of given up on this problem. My scripts now check for IE7 and feed it somewhat simplified HTML that its limited engine can handle. It works in IE8, so, for now, just the special case for IE7 will have to do...

Brian
  • 25,523
  • 18
  • 82
  • 173
Emiel
  • 1,474
  • 1
  • 13
  • 16
  • 2
    +1 I can't provide an insight on this problem but I give you props for putting some genuine effort into the question. Way to set an example! – Tim Frey Mar 15 '09 at 19:37
  • great question, appreciate the effort in explaining exactly what the problem is – Eric Schoonover Mar 15 '09 at 19:39
  • I've copied your source and I've played around with it but couldn't come up with a clean solution. I have the feeling though that something smells on a general level. what if IE actually does the right thing? I've never seen anyone doing such a font overflow before. – markus Mar 15 '09 at 23:55
  • @tharkun: IE can do the right thing, if the funky layout is not inside a floating div. It took me a while to get the error reproduced, with IE consistently doing 'the right thing', but with the exact same HTML not working inside the pages on my site... – Emiel Mar 16 '09 at 10:33

10 Answers10

19

In most cases where IE6 or 7 clips off the bottom of text, just add:

line-height: normal;

to the CSS rules concerned. Should fix it nicely, but as you'll understand, it expands the box too.

11

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.

Paul Hart
  • 111
  • 1
  • 2
  • Oh for the love of god thank you for this answer..... this was driving me absolutely crazy! – potench May 18 '12 at 22:06
  • This fixed my problem! Setting line-height to anything either didn't work or showed an additional line of text but only have of it. Adding bottom padding fixed mine. My issue was js generated text inside of a `textarea`. – Jeff LaFay Jan 30 '14 at 14:46
1

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

Seb
  • 24,920
  • 5
  • 67
  • 85
1

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.

Jason the Saj
  • 11
  • 1
0

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.

Sbhambry
  • 494
  • 2
  • 8
  • 20
0

Try adding

div.postmeta { height: 100px; }
div.postdate { height: 75px; }

Arbitrary height value... but you'd know the exact height you want. That should keep the text containers from clipping in IE7.

Kevin
  • 13,153
  • 11
  • 60
  • 87
0

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

Bryan A
  • 3,598
  • 1
  • 23
  • 29
0

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;
Traingamer
  • 1,438
  • 8
  • 9
  • Yes, but less luck with IE7. Interesting is that when I view the divs and spans using the internet explorer developer toolbar, the squares it draws around them are the right size! It seems to be just clipping it when rendering. – Emiel Mar 11 '09 at 22:23
  • Why the caps on the properties? – alex Mar 31 '09 at 01:09
  • Why the caps? Good question - probably created by IE when I used 'Save As' Webpage complete- I only added the 'height'. Didn't save it after tweaking so couldn't say with certainty. – Traingamer Mar 31 '09 at 16:42
0

Despite being unable to test it on my current machine: I would suspect that it's a hasLayout bug. The methods of dealing with it are listed in the "properties" section of that link.

wombleton
  • 8,336
  • 1
  • 28
  • 30
0

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.

Shakir
  • 273
  • 1
  • 5
  • 14