Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 745
  • Last Modified:

How do I have a fixed footer in my web page in IE6 & IE7 without putting browser in quirks mode?

Hi,

I have been working on this issue for some time now and have not found a satisfactory solution.

At first glance, you would be forgiven for thinking having a fixed footer was a simple endeavor, but as I am finding out, ITS NOT!

Oh yes, there are an abundance of efforts toward this online, but I have yet to find one that WORKS properly in transitional mode.

When I say fixed footer, I mean just exactly what I say, a 'fixed footer' one that NEVER moves and must be compatible with at least IE6, IE7, and Mozilla/5.0.

The fixed aspect should be true regardless of browser window size and if the page content is too long for the wiewing area it should just extend down behing the footer.

I have managed to accomplish all this ....BUT with browser in quirks mode, and according to what I have been reading online, working in quirks mode is a BAD thing as each browser has its own approximation of the standards for presentation. In other words, IE6 tries to mimic IE5.5 and Mozilla tries to mimic Netscape 4 etc.

I am also aware that you can implement doctype switching, but this is no use either since the footer will be visible on every page, so there will be no scope for switching.

So, if anyone has a solution to this problem I would be extremely grateful for your assistance.

Thanks
0
jazz__man
Asked:
jazz__man
  • 4
  • 4
1 Solution
 
myderrickCommented:
0
 
jazz__manAuthor Commented:
myderrick
My whole question was geared towards avoiding quirks mode and your example uses quirks mode.
Thank sanyway.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
myderrickCommented:
think this is OK....

Note: Doctype is Strict...it works in others...
MD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Fixed header and footer for IE</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
body{margin:0}/* for ie mac*/
/* commented backslash hack v2 \*/ 
html, body{height:100%;padding:0} 
* html, * html body{
	overflow:hidden;
	padding:50px 0;
	margin:-50px 0;
	padd\ing:0;
	ma\rgin:0;
}
* html #outer { 
	overflow:auto;
	height:99.9%;
	voice-family: "\"}\""; voice-family:inherit; 
}
* html #contain-all{
	position:absolute;
	overflow-y:scroll;
	width:100%;
	height:100%;
	z-index:1;
}
/* end hack */ 
 
#top-bar{
	position:absolute;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */
	top:0px;
	left:0px;
	height:50px;
	width:100%;
	margin:0;
	padding:0;
	z-index:999;
	overflow:hidden;
}
#topbar-inner, #footer-inner {
	height:50px;
	background:red;
}
/* mac hide - reduce page to allow the scrollbar to remain visible \*/
* html #topbar-inner,* html #footer-inner {margin-right:17px;}
/* end hide*/
 
#footer{
	position:absolute;
	bottom:0;
	width:100%;
	height:50px;
	z-index:999;
}
.spacer {height:50px}/* same height as footer/header to preserve space*/
p{margin-top:0}
html>body #top-bar,html>body #footer{position:fixed}/* for moz/opera and others*/
 
</style> 
</head> 
<body> 
<div id="outer"> 
  <div id="contain-all"> 
    <div class="spacer"></div> 
    <p>This is an experimental layout and untested in a real situation but preliminary 
      results look good.</p> 
						<p>The header and footer need to be a fixed height and are therefore not suited to large amounts of fluid content.</p> 
    <p>The code comments for ie are documented below as they needed to be removed 
      from the code for ie mac</p> 
    <p>* html, * html body{<br /> 
      overflow:hidden;/* remove scroll mechanism from body*/<br /> 
      padding:50px 0;/* for ie5 and 5.5.*/<br /> 
      margin:-50px 0;<br /> 
      padd\ing:0;<br /> 
      margin:0;<br /> 
      }</p> 
    <p>* html #outer { <br /> 
      overflow:auto;/* this is basically the root element now*/<br /> 
      height:100%;<br /> 
      /* we need to make ie5 jump the next style block ( contain-all) so we use 
      the voice hack*/<br /> 
      voice-family: &quot;\&quot;}\&quot;&quot;; voice-family:inherit; <br /> 
      }<br /> 
      * html #contain-all{/* must contain all content except for top and bottom 
      bars - ie5 doesnt want this so jumps it as mentioned above*/<br /> 
      position:absolute;/* due to a bug in ie6 where children of elements that 
      have overflow  defined behave as those they are fixed*/<br /> 
      overflow-y:scroll;<br /> 
      width:100%;<br /> 
      height:100%;<br /> 
      z-index:1;<br /> 
      }<br /> 
    </p> 
    <p>&nbsp; </p> 
    <p>some text to wrap : some text to wrap : some text to cause scrolling : 
      : some text to wrap : some text to wrap : some text to cause scrolling : 
      : some text to wrap : some text to wrap : some text to cause scrolling : 
      : some text to wrap : some text to wrap : some text to cause scrolling : 
      : some text to wrap : some text to wrap : some text to cause scrolling : 
      : some text to wrap : some text to wrap : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>Last bit of text</p> 
    <div class="spacer"></div> 
  </div> 
</div> 
<div id="top-bar"> 
  <div id="topbar-inner">Fixed Top &amp; bottom- Demo works in IE5 IE5.5. and ie6 
    - Firefox 1.0+, Mozilla 1.3+, NN 6.2, Opera 6.03 7.2 7.5,8 : (Mac OS X 10.4 - FireFox 1.5.0.1, Safari 2.0.3 (417.8), IE 5.2 (5.2.3 (5815.1)) </div> 
</div> 
<div id="footer"> 
  <div id="footer-inner"> Fixed footer </div> 
</div> 
</body> 
</html> 

Open in new window

0
 
jazz__manAuthor Commented:
myderrick
Thanks very much for your help but none of these solutions actually work.
If you change the height of the browser window the footer is forced down out of site rather than alowing the content to scroll down behind the footer.
I did explain in my question that this was not easy. You are probably thinking like me when I started trying to do this, for example that it should be quite easy, after all, all we want to do is hold a footer still in the one place at ALL times. Its amazing that something that presents as so simple can in reality be so tough to achieve.
Just another note on the doctype. I would rather use a transitional doctype in my web pages, not strict and definately not quirks.
Cheers
0
 
myderrickCommented:
Are you sure the footer is out of site? What browser are you using it on?

Try this code separately....Let us see if it works...I have changed the doctype...

MD
<!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>Fixed header and footer for IE</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
body{margin:0}/* for ie mac*/
/* commented backslash hack v2 \*/ 
html, body{height:100%;padding:0} 
* html, * html body{
	overflow:hidden;
	padding:50px 0;
	margin:-50px 0;
	padd\ing:0;
	ma\rgin:0;
}
* html #outer { 
	overflow:auto;
	height:99.9%;
	voice-family: "\"}\""; voice-family:inherit; 
}
* html #contain-all{
	position:absolute;
	overflow-y:scroll;
	width:100%;
	height:100%;
	z-index:1;
}
/* end hack */ 
 
#top-bar{
	position:absolute;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */
	top:0px;
	left:0px;
	height:50px;
	width:100%;
	margin:0;
	padding:0;
	z-index:999;
	overflow:hidden;
}
#topbar-inner, #footer-inner {
	height:50px;
	background:red;
}
/* mac hide - reduce page to allow the scrollbar to remain visible \*/
* html #topbar-inner,* html #footer-inner {margin-right:17px;}
/* end hide*/
 
#footer{
	position:absolute;
	bottom:0;
	width:100%;
	height:50px;
	z-index:999;
}
.spacer {height:50px}/* same height as footer/header to preserve space*/
p{margin-top:0}
html>body #top-bar,html>body #footer{position:fixed}/* for moz/opera and others*/
 
</style> 
</head> 
<body> 
<div id="outer"> 
  <div id="contain-all"> 
    <div class="spacer"></div> 
    <p>This is an experimental layout and untested in a real situation but preliminary 
      results look good.</p> 
						<p>The header and footer need to be a fixed height and are therefore not suited to large amounts of fluid content.</p> 
    <p>The code comments for ie are documented below as they needed to be removed 
      from the code for ie mac</p> 
    <p>* html, * html body{<br /> 
      overflow:hidden;/* remove scroll mechanism from body*/<br /> 
      padding:50px 0;/* for ie5 and 5.5.*/<br /> 
      margin:-50px 0;<br /> 
      padd\ing:0;<br /> 
      margin:0;<br /> 
      }</p> 
    <p>* html #outer { <br /> 
      overflow:auto;/* this is basically the root element now*/<br /> 
      height:100%;<br /> 
      /* we need to make ie5 jump the next style block ( contain-all) so we use 
      the voice hack*/<br /> 
      voice-family: &quot;\&quot;}\&quot;&quot;; voice-family:inherit; <br /> 
      }<br /> 
      * html #contain-all{/* must contain all content except for top and bottom 
      bars - ie5 doesnt want this so jumps it as mentioned above*/<br /> 
      position:absolute;/* due to a bug in ie6 where children of elements that 
      have overflow  defined behave as those they are fixed*/<br /> 
      overflow-y:scroll;<br /> 
      width:100%;<br /> 
      height:100%;<br /> 
      z-index:1;<br /> 
      }<br /> 
    </p> 
    <p>&nbsp; </p> 
    <p>some text to wrap : some text to wrap : some text to cause scrolling : 
      : some text to wrap : some text to wrap : some text to cause scrolling : 
      : some text to wrap : some text to wrap : some text to cause scrolling : 
      : some text to wrap : some text to wrap : some text to cause scrolling : 
      : some text to wrap : some text to wrap : some text to cause scrolling : 
      : some text to wrap : some text to wrap : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>some text to cause scrolling : </p> 
    <p>Last bit of text</p> 
    <div class="spacer"></div> 
  </div> 
</div> 
<div id="top-bar"> 
  <div id="topbar-inner">Fixed Top &amp; bottom- Demo works in IE5 IE5.5. and ie6 
    - Firefox 1.0+, Mozilla 1.3+, NN 6.2, Opera 6.03 7.2 7.5,8 : (Mac OS X 10.4 - FireFox 1.5.0.1, Safari 2.0.3 (417.8), IE 5.2 (5.2.3 (5815.1)) </div> 
</div> 
<div id="footer"> 
  <div id="footer-inner"> Fixed footer </div> 
</div> 
</body> 
</html> 

Open in new window

0
 
jazz__manAuthor Commented:
Hi,

Much to my amazement, this seems to be working exactly as I asked. There is an ugly hack, but most importantly, it does work in IE6 and IE7. I suppose the real test will be when I actually try and use it for real in my web pages.

Cheers
0
 
jazz__manAuthor Commented:
Thanks very much, this seems to be working.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now