Top margin removable in Safari but not Firefox
Question
I have created a simple layout using the HTML div tag. I would like for there to be NO margin (meaning no whitespace) at the top of my page. I am able to achieve this in Safari, but for some reason the same HTML code isn't cutting it in Firefox. Here is a jsfiddle of my HTML code: http://jsfiddle.net/WhaGH/
You can't see it in jsfiddle, but if you copy and paste the code into an HTML document and then open it up using Firefox, there is a margin about 21px in height at the top of the page. This top margin does not appear if you open the same HTML file in Safari. I read somewhere else that different browsers use different amounts of default margin and padding with the "html" and "body" tags, hence my inclusion of some CSS in the "head" that sets margin and padding for those tags to 0. Again, this works for Safari but not Firefox (or rather, it works for the left margin but not for the top margin in Firefox). Does anyone know why?
4 answers
solution1
1 2012-03-29 04:58:44
You've done the reset of the default values only for body and html, do it for the other elements as well. You might consider to use, in the future, a CSS reset, have a look at HTML5 Boilerplate
http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/css/
solution2
1 2012-03-29 05:01:40
<style type="text/css">
body { margin: 0; padding: 0; }
h1 { margin: 0; }
</style>
solution3
1 ACCPTED 2012-03-29 05:04:39
by default Firefox use margin-top: 21.4333px for tag, and to div#header is added to the indentation.
Use padding-top to childs of block to prevent this.
h1 { margin-top: 0px; }
Fix this problem.
solution4
1 2012-03-29 06:16:13
you did't clear your header (add one properties overflow:hidden;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
}
</style>
</head>
<body style="width: 800px;">
<div id="header" style="width:800px; height:100px; background-color: blue; border-bottom: solid black 1px;overflow:hidden;">
<h1>This is the Header.</h1>
</div>
<div id="leftcolumn" style="width:199px; height: 500px; background-color: red; float:left; border-right: solid black 1px;">
<p>This is the left column.</p>
</div>
<div id="content" style="width:400px; height: 500px; background-color:gray; float:left;">
<p>This is where the content goes.</p>
</div>
<div id="rightcolumn" style="width:199px; height: 500px; background-color: green; float: left; border-left: solid black 1px;">
<p>This is the right column.</p>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.