Forum Moderators: open
I've been trying to get a footer bar at the fixed bottom position. So far, it seems to work in FF, IE and I also checked in the new Google Chrome browser.
However, in IE something strange happens: when a menu in the navigation gets expanded, the footer shifts over the width of the navigation div to the right.
Relevant code, css:
html {
height:100%; /* needed for container min-height */
margin:0;
font:85% verdana, helvetica, sans-serif;
line-height:20px;
}
body {
background-image:url(back.gif);
background-repeat:repeat;
height:100%; /* needed for container min-height */
font:85% verdana, helvetica, sans-serif;
line-height:20px;
margin:0;
}
#container {
border:dashed black 1px;
border-left:2px solid #990000;
border-right:2px solid #990000;
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:800px;
background:#eeeeee;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header {
border:dashed green 1px;
margin-left:200px;
height:120px;
padding-top:5px;
padding-left:10px;
}
#navigation {
border:dashed red 1px;
float:left;
clear:left;
width:170px;
text-align:right;
padding-right:20px;
padding-left:10px;
padding-top:5px;
}
#footer {
border:dashed blue 1px;
float:right;
position:absolute;
width:100%;
height:22px;
bottom:0; /* stick to bottom */
background:#eeeeee;
border-top:2px solid #990000;
color:#660000;
}
#content {
border:dashed orange 1px;
height:100%;
/*overflow:auto;*/
margin-left:200px;
padding-top:3px;
padding-left:10px;
color:#990000;
}
Relevant code, html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
<body>
<div id="container">
<div id="footer">
<p align="center">examplesite.com</p>
<!-- end div footer -->
</div>
<div id="navigation">
<img src="logo3.gif" alt="" />
<div id="accordion">
...
</div>
</div>
<div id="header">
...
<!-- end div header -->
</div>
<div id="content">
<p>test</p>
</div>
<!-- end div container -->
</div>
</body>
</html>
Any ideas what could cause this - and how to solve it?
Thanks in advance.
Kind regards,
Tom
[edited by: tedster at 4:13 am (utc) on Sep. 7, 2008]
[edit reason] edited title per request [/edit]
However, in IE something strange happens: when a menu in the navigation gets expanded, the footer shifts over the width of the navigation div to the right.
The css sets the footer to float:right. That means it will float to the right of the next element in the xhtml.
In the xhtml the next element after the footer is div#navigation - so the "shift to the right" is the footer obediently drawing itself to the right of div#navigation as it has been told.
If there is no source-ordering reason to have the footer at the top of the xhtml, a fix is to remove float:right from the #footer in the css, and place the footer inside div#container in the xhtml by coding it after div#content, and before the close for div#container.
