Top margin removable in Safari but not Firefox

0
votes

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
htmlcssfirefoxsafari
It could be the h1 that's doing it, or maybe the div. Try playing with the margins on those elements.. also you should use Firebug so you can check the margins etc in the browser while you're viewing the page. – joshuahealy
"You can't see it in jsfiddle": that's because you've left "Normalized CSS" checked on the left. It already does what you're trying to achieve and many other "resets" that 1/ aren't often wanted in real websites 2/ hide some CSS bugs and it does so "silently". – FelipeAls

4 Answers

1
votes

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/

1
votes

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.

1
votes

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>
1
votes
<style type="text/css">
    body { margin: 0; padding: 0; }
    h1 { margin: 0; }
</style>