K, I have a page where there is a header and footer SSI included. On this same page i would ovbiously like a div that is for content. The div really likes to be at the top and it’s making me angry.
http://www.akacom.com/newe4x/index.shtml
http://www.akacom.com/newe4x/header.html
http://www.akacom.com/newe4x/footer.html
http://www.akacom.com/newe4x/e4x.css
Main page 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=iso-8859-1" />
<title>E4X</title>
<link href="e4x.css" rel="stylesheet" type="text/css" />
<!--#include virtual="header.html" -->
<!--#include virtual="footer.html" -->
</head>
<body>
<div id="container">
<div id="content">
CSS is my arch nemesis.
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #999999;
height: 100%;
background-image:url(img/bg.gif);
background-position:top center;
background-repeat:repeat-y;
margin: 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}
#container
{
position: absolute;
margin: 0 auto;
width: 600px;
top:400px;
}
#content
{
position: relative;
width: 600px;
height: 246px;
top:0px;
}
Header:
<!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>
<title>E4X</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#header{
position:absolute;
background:url(img/header/light/headerbg.gif);
background-repeat:repeat-x;
height:105px;
top:0px;
width:100%;
left:0px;
}
#headcontainer {
position: relative;
margin: 0 auto;
width: 665px;
}
#headcenter {
position: relative;
top:0px;
width: 665px;
}
#vertlineleft {
position:absolute;
left:131px;
top:0px;
width:2px;
height:105px;
}
#vertlineright {
position:absolute;
left:522px;
top:0px;
width:2px;
height:105px;
}
#logo {
position:absolute;
left:0px;
top:19px;
width:111px;
height:71px;
}
#login {
position:absolute;
left:550px;
top:19px;
width:115px;
height:30px;
}
#about {
position:absolute;
left:133px;
top:59px;
width:96px;
height:46px;
}
#solutions {
position:absolute;
left:229px;
top:59px;
width:97px;
height:46px;
}
#technology {
position:absolute;
left:326px;
top:59px;
width:99px;
height:46px;
}
#opportunity {
position:absolute;
left:425px;
top:59px;
width:97px;
height:46px;
}
#support {
position:absolute;
left:550px;
top:74px;
width:43px;
height:16px;
}
#pipe {
position:absolute;
left:599px;
top:74px;
width:4px;
height:16px;
}
#contact {
position:absolute;
left:609px;
top:74px;
width:56px;
height:16px;
}
-->
</style>
</head>
<body>
<div id="header">
<div id="headcontainer">
<div id="headcenter">
<div id="vertlineleft">
<img src="img/header/light/vertline.gif" width="2" height="105" alt="" />
</div>
<div id="vertlineright">
<img src="img/header/light/vertline.gif" width="2" height="105" alt="" />
</div>
<div id="logo">
<a href="index.php"><img src="img/header/light/logo.gif" alt="" width="111" height="71" border="0" /></a> </div>
<div id="login"><a href="login.html"><img src="img/header/light/login.gif" alt="" width="115" height="30" border="0" /></a></div>
<div id="about">
<a href="about.html"><img src="img/header/light/about.gif" alt="" width="96" height="46" border="0" /></a> </div>
<div id="solutions">
<a href="solutions.html"><img src="img/header/light/solutions.gif" alt="" width="97" height="46" border="0" /></a> </div>
<div id="technology">
<a href="technology.html"><img src="img/header/light/technology.gif" alt="" width="99" height="46" border="0" /></a> </div>
<div id="opportunity">
<a href="opportunity.html"><img src="img/header/light/opportunity.gif" alt="" width="97" height="46" border="0" /></a> </div>
<div id="support">
<a href="support.html"><img src="img/header/light/support.gif" alt="" width="43" height="16" border="0" /></a> </div>
<div id="pipe">
<img src="img/header/light/pipe.gif" width="4" height="16" alt="" />
</div>
<div id="contact">
<a href="contact.html"><img src="img/header/light/contact.gif" alt="" width="56" height="16" border="0" /></a> </div>
</div>
</div>
</div>
</body>
</html>
Footer:
<!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>
<title>E4X</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#footer{
position:absolute;
background:url(img/footer/light/footerbg.gif);
background-repeat:repeat-x;
height:50px;
bottom:0px;
width:100%;
left:0px;
}
#footcontainer
{
position: relative;
margin: 0 auto;
width: 665px;
}
#footcenter
{
position: relative;
width: 665px;
}
#legal {
position:absolute;
left:501px;
width:98px;
height:50px;
}
#sitemap {
position:absolute;
left:599px;
width:97px;
height:50px;
}
-->
</style>
</head>
<body>
<div id="footer">
<div id="footcontainer">
<div id="footcenter">
<div id="legal">
<img src="img/footer/light/legal.gif" width="98" height="50" alt="" />
</div>
<div id="sitemap">
<img src="img/footer/light/sitemap.gif" width="97" height="50" alt="" />
</div>
</div>
</div>
</div>
</body>
</html>
I was thinking it was conflicting CSS so i named all ids different. I think it may now have to do with multiple head and body tags. There is only one set of body CSS properties in the “e4x.css”. Hmmm…