Doctype line height issue

Question

I've got two HTML pages EDIT: fiddle if you click on fiddle options and switch between the doc types you can see the difference in how they're rendered.

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="Styles.css" title="Styles" />
<meta charset="utf-8" />
</head>
<body>
<div class="page1" >

<div class="classTextbox1">
    <p>
        <span class="text165">
            this is a big string this is a big string this is a big string this is a big string this is a big string this is a big string 
        </span>
    </p>
</div>

</div>

</body>
</html>

and

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<link rel="stylesheet" type="text/css" href="Styles.css" title="Styles" />
<meta charset="utf-8" />
</head>
<body>
<div class="page1" >

<div class="classTextbox1">
    <p>
        <span class="text165">
            this is a big string this is a big string this is a big string this is a big string this is a big string this is a big string 
        </span>
    </p>
</div>

</div>

</body>
</html>

The stylesheet for both of them is

p { margin-top: 0; margin-bottom: 0 }
table { border-collapse: collapse; border-spacing: 0 }
tr { vertical-align : top }

body { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; word-wrap: break-word }

.text127 {font: 13px "Times New Roman", "Times New Roman", serif; line-height: 15px }
.text165 {font: 11px "Helvetica", "Helvetica", sans-serif; }
.classTextbox1 { position: absolute; left: 24px; top: 60px; width: 73px; height: 12px; overflow: hidden }
.page1{ position: absolute; top: 0px; width:816px; height:1008px }

Besides the doc type the HTML pages are identical and the style sheets are identical. However, when the HTML5 doc type is viewed in Chrome (latest) and Firefox (32) the text appears several pixels lower than it does in HTML4. I'm not sure if line-height is the culprit, but I'm lost for what the problem is. Any ideas? TIA.

Did you try to inspect the page and mess around with the line-height? — Huangism, Jan 28 '15 at 19:00
@Huangism, yes I changed it, removed it totally and never saw a difference. — wootscootinboogie, Jan 28 '15 at 19:01
The only `line-height` in your CSS is applied to `.text127` but that class is not even found in the HTML, so explain how that works. — Waxi, Jan 28 '15 at 19:01
@wootscootinboogie line height is not defined for `.text165` and `.text127` is not in your html. Are you positive you edited the right thing? — Huangism, Jan 28 '15 at 19:03
@slime it appears that's not the problem then. The text is still being clipped half way in the HTML5 version — wootscootinboogie, Jan 28 '15 at 19:03
@Huangism yes, all other things equal if I change the HTML5 doc type to the HTML4 doc type they both render the same. — wootscootinboogie, Jan 28 '15 at 19:05
Could this post be of any help? http://stackoverflow.com/questions/11268563/doctype-affects-rendering-of-line-height I hope I understand it right. Good luck. — A3O, Jan 28 '15 at 19:06
Do some process of elimination. You don't have a lot of HTML, and you have more CSS than you actually need, so start removing things until you found what triggered the difference. — Waxi, Jan 28 '15 at 19:09
@Huangism this is backwards from that question. Here, HTML5 doc type renders shorter than the transitional doc type. — wootscootinboogie, Jan 28 '15 at 19:09
@wootscootinboogie well setting a `vertical-align` does solve the issue but I am not 100% sure what's causing it. Perhaps the alignment of the text or the baseline of the text is different. By solve I mean the text shows up not cutoff, but I think the spaces between lines is still there — Huangism, Jan 28 '15 at 19:11
@Huangism the CSS files and HTML are identical except for the doc types. If I use a non-transitional doc type then it renders cut off (like the HTML5 version does). — wootscootinboogie, Jan 28 '15 at 19:15

score 3 · Accepted Answer · edited May 23 '17 at 12:06

I think this has something to do with you putting the font size on the span which is an inline element. This is whee it gets tricky as I don't know what's going on when you do this but apparently when the inline element has a different font size than the container block element the line height gets affected. I did a couple of tests using jquery to alert the line height in FF with HTML5 doctype. The line height returns 17.xx when you set the font size of 11px on the span and it returns 13.xx if you set it on the p

If you put the font css in the paragraph tag, it will solve your problem

http://jsfiddle.net/ywu5107e/1/

p { 
    margin-top: 0;
    margin-bottom: 0; 
    font: 11px "Helvetica", "Helvetica", sans-serif; 
}

You can also have a read at HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove? the first answer is helpful

You were correct, it is the fact that the font size on an inline element that was the rub. +1 thanks. — wootscootinboogie, Jan 28 '15 at 21:43

Doctype line height issue

1 Answers1