...

View Full Version : spontanous top margin



amc
01-02-2010, 06:45 PM
the page below shows with a margin at the top (and at the sides). Why is the reason, if no margin,padding,etc.. is declared?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#HEADER {
width:100%;
height:40px;
background:#330022;
color:#EEFF00;
} </style>
</head>

<div id="HEADER">HELLO</div>
<body>
</body>
</html>

Excavator
01-02-2010, 07:02 PM
Hello amc,
That margin comes from the browsers default settings. What makes that even more fun is defaults are different from browser to browser.
You also have your #header in the wrong place, website content goes inside the body tags (see my example below)

I always use a CSS reset to zero defaults out. Try this -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#HEADER {
width:100%;
height:40px;
background:#330022;
color:#EEFF00;
}
</style>
</head>
<body>
<div id="HEADER">HELLO</div>
</body>
</html>

amc
01-05-2010, 06:13 PM
it works. thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum