CODEWITHSUNDEEP
htmlcss
wootscootinboogie
wootscootinboogie

Reputation: 8695

Doctype line height issue

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.

Upvotes: 1

Views: 1146

Answers (1)

Huangism
Huangism

Reputation: 16448

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

Upvotes: 3

Related Questions