homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Extra top padding in a container when using HTML5 doctype
Rain_Lover




msg:4656841
 5:47 pm on Mar 24, 2014 (gmt 0)

There is extra top padding in the following div:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Extra Top Padding</title>
<style>
div {
background: tan;
}
div * {
vertical-align: middle;
}
span {
font-size: 16px;
}
</style>
</head>

<body>
<div id="container">
<img src="https://ssl.gstatic.com/images/icons/gplus-16.png"><span>Some text</span>
</div>
<p id="indicator"></p>
<script>
document.getElementById('indicator').textContent = document.getElementById('container').clientHeight;
</script>
</body>

</html>


DEMO: [jsfiddle.net ]

It shows correctly if you use HTML 4.01 Transitional doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Is it a bug in HTML5?

 

rainborick




msg:4656845
 6:24 pm on Mar 24, 2014 (gmt 0)

Annoying as it may be, I expect that in the end it will come down to browsers having different defaults for different <!DOCTYPE>s - especially for the HTML and BODY elements. In any case, the solution is straightforward enough.

Rain_Lover




msg:4656851
 6:33 pm on Mar 24, 2014 (gmt 0)

I tried * {margin:0; padding:0;} to no avail.

drhowarddrfine




msg:4656910
 11:24 pm on Mar 24, 2014 (gmt 0)

HTML5 is a specification, not an application, so, no, it's not a bug in HTML5. But no one should be using the transitional doctype for new web pages since 1999 so I don't know why the comparison is being made.

Without checking, I'd bet the difference is caused between the values of textContent and clientHeight.

drhowarddrfine




msg:4657066
 11:23 am on Mar 25, 2014 (gmt 0)

Forget my last line about textContent. It does change with the doctype so that statement doesn't make sense. I'm not surprised the doctype causes the change but it's been so long since I've had to deal with those issues that I don't remember and it's not worth remembering for the reason I stated, no one should be using a transitional doctype for new web pages.

Fotiman




msg:4657131
 4:21 pm on Mar 25, 2014 (gmt 0)

You're seeing the line-height of the <div>. Since you haven't specified a line-height, the browser will default to "normal", and the value of "normal" is browser defined. Many browsers use 1.2 of the font-size. Perhaps "normal" was different in HTML4.01 loose. In any case, if you want/need a fixed line-height, then declare it in your CSS.

Rain_Lover




msg:4657714
 2:39 am on Mar 27, 2014 (gmt 0)

@Fotiman:

Yes, you're right!
I'd better completely get rid of the container line-height so its height equals the content height:
[jsfiddle.net ]
Now it works on any font & image size.

Thank you very much! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved