I have a design that is done. However I had only tested on FF and IE 8 when I was building it.
It does not work Im finding in IE6 and 7
Can anyone help? Ive searched for similar problems here and havent found the answer
The footer is in a fixed position always viewable no matter where you are. Here is the code. Thanks in advance
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=us-ascii" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="css/twoColLiqLtHdr3.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColLiqLtHdr">
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li><a href="test.html">test</a></li>
<li><a href="test.html">test</a></li>
<li><a href="test.html">test</a></li>
<li><a href="test.html">test</a></li>
<li><a href="test.html">test</a></li>
<li><a href="test.html">test</a></li>
<li><a href="test.html">test</a></li>
</ul>
</div>
</div>
</div>
<div id="container2">
<div id="mainContent">
<!-- TemplateBeginEditable name="EditRegion1" -->
<h1>Main Content</h1>
<p>topic</p>
</div>
<div id="sidebar1">
<br />
<div id="ad">
<h3>Heading 3</h3>
<div>
<p>hello</p>
</div><br class="clearfloat" />
</div>
<div id="footer">
<p>Sitemap</p>
</div>
</body>
</html>
CSS
@charset "utf-8";
body {
text-align:center;
color:#6D6E70;
background-image:url(../images/bg_main.png);
background-color:#777956;
background-attachment:scroll;
background-repeat:no-repeat;
background-position:top;
font-family:Arial, Helvetica, sans-serif;
font-size:90%;
margin:0;
padding:0;
}
a:link {
color:#000;
text-decoration:none;
font-weight:700;
}
a:hover {
color:#777956;
text-decoration:underline;
}
#menu {
list-style-type:none;
font-size:100%;
cursor:default;
width:auto;
float:right;
margin:9px 0 0;
padding:0;
}
#menu ul {
list-style:none;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
}
#menu li {
list-style:none;
display:inline;
float:left;
background-image:url(../images/MainTab.gif);
margin-top:33px;
border-right-width:1px;
border-right-style:solid;
border-right-color:#EAE6E8;
padding-top: 25px;
padding-right: 22px;
padding-bottom: 23px;
padding-left: 22px;
}
#menu li a {
display:inline;
float:left;
color:#917578;
font-size:12px;
font-weight:700;
font-family:Geneva, Arial, Helvetica, sans-serif;
text-decoration:none;
}
#menu li a span {
display:inline;
}
#menu li a:hover {
color:red;
}
.twoColLiqLtHdr #container {
width:959px;
text-align:left;
margin:0 auto;
}
.twoColLiqLtHdr #header {
height:155px;
background-image:url(../images/bg_navbar2.png);
background-repeat:no-repeat;
margin:0;
padding:0 10px 0 19px;
}
.twoColLiqLtHdr #mainContent {
background-color:#FFF;
margin-left:2%;
float:left;
width:70%;
}
.twoColLiqLtHdr #sidebar1 h3,.twoColLiqLtHdr #sidebar1 p {
margin-left:10px;
margin-right:10px;
}
.twoColLiqLtHdr #container2 {
width:959px;
text-align:left;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
background-color:#FFF;
}
.twoColLiqLtHdr #sidebar1 {
float:left;
background-color:#FFF;
width:26%;
text-align:center;
}
.twoColLiqLtHdr #footer {
background-color:#FFF;
border-top-width:thick;
border-top-style:solid;
border-top-color:#000;
text-align:right;
padding:0;
position: fixed;
height: 100px;
width: 100%;
bottom: 0px;
}
.left {
float:left;
text-align:center;
}
.right {
float:right;
text-align:center;
}
.fltrt {
float:right;
margin-left:8px;
}
.fltlft {
float:left;
margin-right:8px;
}
.clearfloat {
clear:both;
height:0;
font-size:1px;
line-height:0;
}
#ad {
position:static;
width:220px;
font-weight:700;
background-image:url(../images/navbar-l.gif);
height:150px;
background-repeat:no-repeat;
padding-top:5px;
margin-left:6%;
}
#profile {
position:static;
width:220px;
padding-top:5px;
font-weight:700;
margin-left:6%;
background-image:url(../images/profile.gif);
height:150px;
background-repeat:no-repeat;
}
.twoColLiqLtHdr #header h1,.twoColLiqLtHdr #footer p {
margin:0;
padding:10px 0;
}
