View Full Version : Cropped text, IE CSS Bug?

05-04-2006, 10:43 AM
Iíve got a problem in IE where it's cutting off the top of some text, it works perfectly in FF.

The quotation marks are in spans which are absolutely positioned. If I turn the absolute positioning off they render fine, but thatís no good because I donít want them inline with the text.

Does anyone have any ideas? I canít post a link because the sites not live yet, but here is the css for the spans, and attached is an image of what it looks like in FF and IE:

blockquote span.mark {
color: #ff9900;
font-size: 3em;
position: absolute;
font-family: Arial, Helvetica, sans-serif;

blockquote span.open {
top: 20px;
left: 10px;

blockquote span.close {
bottom: 33px;
right: 10px;

Thanks in advance


05-04-2006, 10:51 AM
OK, so I fixed it, added padding-top to the span.mark:

padding-top: 10px;

Never seen this bug before, and the fix is a bit bizzare, but it seems to work.

05-04-2006, 11:46 AM
The span element is inline and should therefore not apply vertical padding; better use line-height instead (it's possible that IE and FF use different defaults).

05-04-2006, 03:30 PM
Yeah, but for some reason it did. Also, when i adjusted the line height it had no effect. I would have thought a simple display:block would have fixed it, but no.

Really weird.