Boards of Canada
Member
Alright, yet another post where I need CSS help. You guys were great last time, here's hoping I can get this one figured out.
Here's what my page looks like:
That white background with border is my #PageContainer and extends to the footer. That I like. What I don't like is that I have this massive gap at the top and I can't figure out why it's there. I'm at work on a Mac, so when I view this in Safari and Netscape, it shows up like that. When I view it in MacIE, it shows it without the gap.
Here's my HTML:
And here's my CSS:
I'm sorry I can't link to this since I don't have FTP access to the site yet. But hopefully this works.
Here's what my page looks like:
That white background with border is my #PageContainer and extends to the footer. That I like. What I don't like is that I have this massive gap at the top and I can't figure out why it's there. I'm at work on a Mac, so when I view this in Safari and Netscape, it shows up like that. When I view it in MacIE, it shows it without the gap.
Here's my HTML:
Code:
<!DOCTYPE html...>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title> - </title>
<link href="jestyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/prototype.js"></script>
<script type="text/javascript" src="includes/scriptaculous.js"></script>
</head>
<body>
<div id="PageContainer">
<div id="Header">
<h1>Header</h1>
<div id="Login">
<label for="username">Username:</label>
<input name="username" type="text" id="username" />
<label for="password">Password:</label>
<input name="password" type="password" id="password" />
</div>
</div>
<div id="Content">
This is Content
</div>
<div id="Footer">
FOOTER
</div>
</div>
</body>
</html>
Code:
/*----------------------------------------------------------*/
/* WEBSITE BODY PROPERTIES */
/*----------------------------------------------------------*/
body /* These adjust the body, like the page bgcolor */
{
background: #CCC;
margin: 0;
padding: 0;
}
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
/*----------------------------------------------------------*/
/* WEBSITE PAGE CONTAINER */
/*----------------------------------------------------------*/
#PageContainer /* Settings for the box around the page */
{
position: absolute;
left: 50%;
top: 0;
width: 700px;
margin: 0 0 0 -350px;
background-color: FFF;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
/*----------------------------------------------------------*/
/* WEBSITE HEADER */
/*----------------------------------------------------------*/
#Header /* The big pretty website header location */
{
position: relative;
top: 0;
left: 0;
width: 700px;
height: 100px;
background-color: #F00;
}
#Header h1 /* The website font properties */
{
position: relative;
top: 0;
left: 10px;
width: 200px;
font-family:"Trebuchet MS", Tahoma, sans-serif;
font-size: 36px;
}
#Header h2 /* website header subhead */
{
font-family:"Trebuchet MS", Tahoma, sans-serif;
font-size: 24px;
color: #000;
}
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
/*----------------------------------------------------------*/
/* WEBSITE FOOTER */
/*----------------------------------------------------------*/
#Footer /* Page footer */
{
position: relative;
width: 700px;
background-color: #00F;
}
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
/*----------------------------------------------------------*/
/* WEBSITE LOGIN */
/*----------------------------------------------------------*/
#Login /* This is the login box position and size */
{
position: absolute;
top: 11px;
left: 417px;
width: 200px;
background-color: #090;
padding: 10px;
}
#Login label /* Labels for the input boxes */
{
float: left;
width: 80px;
margin-top: 5px;
font-family: "Trebuchet MS", Tahoma, sans-serif;
font-size: 12px;
color: #FFF;
}
#Login textarea, input /* Style for the text boxes */
{
width: 120px;
font-family: "Trebuchet MS", Tahoma, sans-serif;
font-size: 10px;
margin-top: 3px;
clear: right;
}
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
/*----------------------------------------------------------*/
/* WEBSITE CONTENT */
/*----------------------------------------------------------*/
#Content
{
position: relative;
width: 700px;
}