homepage Welcome to WebmasterWorld Guest from 54.161.190.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Fixed Footer IE6 and 7
IE 6 and 7 Issues
brnm98105




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

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;
}

 

funkyapache




msg:4100201
 9:24 am on Mar 18, 2010 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved