Chris Patti
01-02-2009, 07:31 PM
Hi, I'm creating a new design for myself and I'm running into a bit of an issue.
http://xiist.com/new/ is the site so far
As you can see the white #page div is right against the top even though margin-top is there in the css. Margin-left seems to be working fine, but margin top isn't. If anyone knows what the problem is do share.
Heres the source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="background">
<img src="images/frozentree.jpg" width="100%" height="100%" alt="" />
</div>
<div id="container">
<div id="wrapper">
<div id="page">
sss<div style="background: #eeeeee;">dsds</div>
</div>
</div>
</div>
</body>
</html>
Here is the CSS:
@charset "UTF-8";
/* CSS Document */
body
{
margin: 0;
padding: 0;
}
.background
{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#container
{
position: relative;
z-index: 2;
}
#wrapper
{
background: #000000;
width: 820px;
height: 800px;
margin: 100px auto;
}
#page
{
background: #ffffff;
width: 800px;
height: 780px;
margin-top: 10px;
margin-left: 10px;
}
http://xiist.com/new/ is the site so far
As you can see the white #page div is right against the top even though margin-top is there in the css. Margin-left seems to be working fine, but margin top isn't. If anyone knows what the problem is do share.
Heres the source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="background">
<img src="images/frozentree.jpg" width="100%" height="100%" alt="" />
</div>
<div id="container">
<div id="wrapper">
<div id="page">
sss<div style="background: #eeeeee;">dsds</div>
</div>
</div>
</div>
</body>
</html>
Here is the CSS:
@charset "UTF-8";
/* CSS Document */
body
{
margin: 0;
padding: 0;
}
.background
{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#container
{
position: relative;
z-index: 2;
}
#wrapper
{
background: #000000;
width: 820px;
height: 800px;
margin: 100px auto;
}
#page
{
background: #ffffff;
width: 800px;
height: 780px;
margin-top: 10px;
margin-left: 10px;
}