I'm trying to make a div that is flush with the top of the screen. I set the body margins to 0em. No problem there. Even though there doesn't seem to be any body padding I set it to 0em also just to be safe. No problem there either. At this point I still have an awkward area between the div and the top of the screen where the body background color is shown. So I set the div margin and padding to 0em. Nothing changes! However, if I give the div a border the border shows up at the top of the screen (suggesting some kind of weird transparent padding when there's no border). Sooo confused. Any help on this much appreciated. My CSS and XHTML are shown below (I know this page is ugly it's just an experiment because I'm new to most of this stuff).
Here's the CSS:
body {
background-image: url(tessellation.gif);
border: 2px solid red;
margin: 0em;
padding: 0em;
}
#content {
background-color: white;
margin: 0em;
padding: 0em;
}
Anddd here's the XHTML:
<!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" xml:lang="en">
<head>
<title>Images</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">
<h1>Images</h1>
<h2>JPEG vs GIF</h2>
<p>An image of a crysanthemum stored as a <abbr title="Joint Photographic Experts Group">JPEG</abbr>:<br /><img src="chrysanthemum.jpg" alt="Chrysanthemum" width="400" height="400" /></p>
<p>Now, an image of a crysanthemum stored as a <abbr title="Graphics Interchange Format">GIF</abbr>:<br /><img src="chrysanthemum.gif" alt="Chrysanthemum" width="400" height="400" /></p>
</div>
</body>
</html>