Welcome to WebmasterWorld Guest from 54.145.166.247

Forum Moderators: not2easy

Message Too Old, No Replies

Fixed Footer IE6 and 7

IE 6 and 7 Issues

   
10:53 pm on Mar 12, 2010 (gmt 0)

5+ Year Member



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;
}
9:24 am on Mar 18, 2010 (gmt 0)

5+ Year Member



I'm not sure why IE7 does not work. I know IE6 does not support the "fixed" position. If you need IE6 to have a "fixed" you need to add some Javascript that works out the bottom of the page and positions it accordingly this script would need to run when you scroll as well. Its quiet messy as it jumps a bit between the updates.