[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

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

Sticky footer for a fluid width layout

Hello,

I have done extensive research on all the various ways to create a "sticky footer" that sticks at the bottom of the page (and below all content), regardless of browser size.  They all work beautifully, except when I attempt to apply it to my fluid width layout.  Every approach I've used for my page has broken my layout somehow (due to my inexperience no doubt).  

I am basing my layout on Chris Coyier's Perfect Fluid Width Layout, found here:

http://css-tricks.com/examples/PerfectFluidWidthLayout/

This does include a footer, but it is stuck at the bottom of the content, so if the content is short, the footer is above the viewport, which I don't want.

The major difference in my layout is that I want the page wrapper to extend to the bottom of the page regardless of content, as demonstrated here:

http://swanflighthaven.com/fluidwidthlayout/

And of course I'm struggling to find a way to stick a footer at the very bottom, below all content.  If the content is shorter than the viewport, I want the footer at the bottom of the viewport.  If content is longer than the viewport, I want the footer below all content.

I have tried many sticky footer methods, such as those found here:

http://ryanfait.com/sticky-footer/

and here:

http://www.cssstickyfooter.com/

(which are perfect examples of what I'm trying to achieve)

But the only one I've had limited success on is the method described at the bottom of this page:

http://www.webmasterworld.com/forum83/6525.htm

And here is my messy attempt to apply this sticky footer method on my actual design:

http://swanflighthaven.com/fluidwidthlayout/example/index_foot.html

In FF it the page doesn't even properly extend beyond the content, but at least the footer is in the right place (albeit not wide enough).  If anyone can make heads or tails of this, I'd be most grateful.  I'm hoping for something that will validate and work cross-browsers.  Please let me know if there's anything I need to clarify.  I believe all the code can be viewed by looking at the source, but I can also paste whatever code necessary upon request.

Many thanks,
~Coral
0
Coral3
Asked:
Coral3
  • 10
  • 9
1 Solution
 
yessirnosirCommented:
I just noticed that the first link you provided is only partially fluid, i.e. fixed left column.  That actually makes the layout a lot easier to achieve than having both columns fluid.  Have a look at this other layout, that has a sticky footer, although it is implemented in a way that allows a margin all the way around the page if desired
http://www.tightcss.com/layouts/swiss_army_2col.htm
0
 
Coral3Author Commented:
Yessirnosir,

Thanks so much for your reply.  I probably should have clarified that the layout outlined in my link is actually a fluid layout with a minimum and maximum width, and it's fluid in between those widths.  It's important to me that I keep it that way, if possible.  The two layouts you gave me won't work for that unfortunately.  Any other ideas you have are weclome.

~Coral
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!

 
Coral3Author Commented:
The second link has a max-width, is there a way to give it a min-width?
0
 
Coral3Author Commented:
My bad, I looked at the code and it doesn't have a max-width, only a percentage.

My current layout has a max-width of 1026px and a min-width of 752px.
0
 
yessirnosirCommented:
Hi again... maybe we can step back and make sure I'm on the same page as you.  I jumped to the conclusion that you needed a two column layout based on the first "perfectfluidwidthlayout", but your example at http://swanflighthaven.com/fluidwidthlayout/example/index_foot.html is a single column, which is actually a lot easier to do... if you could confirm how you want this to work, I can make sure I'm working on the right thing.  thx.
0
 
Coral3Author Commented:
Hello again...yes, my layout is a single column with a min and max width, my apologies again for not clarifying better.
0
 
yessirnosirCommented:
Hi, have a look at attached code... I think it is most of the way there, although I couldn't find a way to preserve one of the background images (top horizontal)....    but I have to go for a while so will post what I have and check back later.

btw... the starting point for what I was trying to do is:  http://www.tightcss.com/layouts/stickyfooter.htm
But that layout doesn't have the complexity of all the background images you are using.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="style-ie.css" >
	<![endif]-->
<link rel="stylesheet" type="text/css" href="coralfoot_files/menu_.css">
<style type="text/css">
* {
	margin: 0;
	padding:0;
}
body {
	font-size: 62.5%;
	background-image: url(bg_thinbar.jpg);
	background-repeat:repeat-y;
	background-position:top center;
	background-color:#759baa;
	text-align:center;
}
html, body {
	height: 100%;
}
#wrapper {
	background-image:url(top_back.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	min-width: 752px;
	max-width: 1026px;
	background-color:#EAF2F5;
	min-height: 100%;
	height: auto;
	margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
#header {
	background-image:url(topsides_.jpg);
	background-position: top center;
	background-repeat:no-repeat;
	text-align: center;
	height:185px;
	z-index:16;
}
#main-content {
	background-color:#EAF2F5;
	min-width: 752px;
	max-width: 1026px;
	margin:0 auto;
}
.content {
	background-color:#EAF2F5;
	text-align: left;
	background-image:url(largebottom4.jpg);
	background-repeat:no-repeat;
	padding-right:20px;
	padding-left:20px;
	padding-top: 20px;
	padding-bottom:60px;
}
#push {
	height: 100px; /* #push must be the same height as #footer */
}
#footer {
	position:relative;
	min-width: 752px;
	max-width: 1026px;
	margin: 0px auto;
	background-color:/*#EAF2F5*/pink;
	height:100px;
}
img {
	border: none;
}
h2 {
	font: 1.8em Tahoma, sans-serif;
	color: green;
	margin-bottom: 10px;
}
p {
	font: 1.2em/1.8em Tahoma, sans-serif;
	margin-top: 10px;
}
/*#footerwrap {
	min-width: 752px;
	max-width: 1026px;
	margin: 0px auto;
	background-color:#EAF2F5;
	height:100%;
	min-height:100%;
}*/
/*#page-wrap {
	background-color:#EAF2F5;
	z-index:2;
}*/
#inside {
/*position:relative;*/
	/*background-color:#EAF2F5;*/
	/*min-height:100%;*/
	
	/*z-index:3;*//*margin-bottom: 6em;*/ /*Modify value as needed for
footer height.*/
	/*height: auto;*/
	/*padding-bottom:6em;*/
}
/*#main-content {
	background-color:#EAF2F5;
	text-align: left;
	background-image:url(largebottom4.jpg);
	background-repeat:no-repeat;
	padding-right:20px;
	padding-left:20px;
	padding-top: 20px;
	padding-bottom:60px;
	z-index:1;
	_height: 0;
}*/
#overlay {
	position:absolute;
	top:0px;
	left:0px;
	z-index:5;
}
/*#centeringhead {
	position:absolute;
	left:50%;
	margin-left:-376px;
	width:752px;
	text-align: center;
	z-index: 100;
}*/
/*#flasher {
	display:none;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-376px;
	width:752px;
	text-align: center;
	z-index:101;
}*/
/*#member2 {
	padding-right:40px;
	padding-bottom:20px;
	clear:both;
	float:left;
	width:190px;
	height:208px;
	z-index: 8;
}*/
#insidefooter {
	width:752px;
	left:50%;
	margin-left:-376px;
	text-align:center;
	position: absolute;
	bottom: 0;
	background-color:#EAF2F5;
	z-index:900;
	background-color: #EAF2F5;
}
.style1 {
	color: #284861
}
#menuwrapper {
	text-align:center;
	position:relative;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	width: 752px;
}
.style2 {
	font-size: 1em
}
a:link {
	text-decoration: underline;
	color: #2F298D;
}
a:visited {
	text-decoration: underline;
	color: #2B3F4A;
}
a:hover {
	text-decoration: none;
	color: #2C4672;
}
a:active {
	text-decoration: underline;
	color: #2B3F4A;
}
.style1 {
	font-family: Arial, Helvetica, sans-serif
}
.style4 {
	font-size: 16px;
	color: #f4793a;
}
.style5 {
	font-family: Geneva, Arial, Helvetica, sans-serif
}
.style6 {
	font-family: Verdana, Arial, Helvetica, sans-serif
}
.style7 {
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style9 {
	font-size: 18px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
.style10 {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #284861;
	font-size: 2em;
	font-weight: bold;
}
.style12 {
	font-family: Arial, Helvetica, sans-serif;
	color: #284861;
	font-size: 14px;
}
.style14 {
	font-family: Arial, Helvetica, sans-serif;
	color: #284861;
	font-size: 12px;
}
</style>
</head>
<body onload="document.getElementById('flasher').style.display = 'block'; ">
<div id="wrapper">
  <div id="header"> <a href="http://swanflighthaven.com/fluidwidthlayout/example/index_new6.html"><img src="coralfoot_files/clear.gif" alt="Home" title="Home" border="0" width="752" height="159"> </a>
    <div id="menuwrapper">
      <ul id="qm0" class="qmmc">
        <li><a href="javascript:void(0)">Our Pastor</a></li>
        <li><a href="javascript:void(0)">Our Beliefs</a></li>
        <li><a href="javascript:void(0)">Worship Services</a></li>
        <li><a class="qmparent" href="javascript:void(0)">Ministries »</a>
          <ul>
            <li><a class="qmparent" href="javascript:void(0)">Text»</a>
              <ul>
                <li><a href="javascript:void(0);">Text</a></li>
                <li><a href="javascript:void(0);">Text</a></li>
              </ul>
            </li>
            <li><a class="qmparent" href="javascript:void(0)">Text»</a>
              <ul>
                <li><a href="javascript:void(0);">Text</a></li>
                <li><a href="javascript:void(0);">Text</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="javascript:void(0);">Odyssey</a></li>
        <li><a href="javascript:void(0);">Announcements</a></li>
        <li><a href="javascript:void(0);">Links</a></li>
        <li class="qmclear">&nbsp;</li>
      </ul>
      <div id="menu_s">
        <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/pastor.html">Our Pastor</a></div>
        <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/beliefs.html">Our Beliefs</a></div>
        <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/worship.html">Worship Services</a></div>
        <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/ministries.html">Ministries »</a></div>
        <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/announcements.html">Odyssey</a></div>
        <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/odyssey.html">Announcements</a></div>
        <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/links.html">Links</a></div>
      </div>
    </div>
  </div>
  <div id="main-content">
    <div class="content">
      <!--<div id="centeringhead"><a href="#"><img src="coralfoot_files/clear.gif" alt="Home" title="Home" border="0" width="752" height="159"> </a></div>
        
        <div style="display: block;" id="flasher"> Flash Content </div>-->
      <!--<div id="member2"><img src="coralfoot_files/clear.gif" alt="members" width="200" height="218"></div>-->
      <br>
      <br>
      <h2 class="style1">Welcome to our Church </h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
        mollis, massa nec posuere molestie, eros nisi consectetur urna, eu
        dictum massa magna a dolor. Fusce luctus urna id est. Vestibulum
        euismod nisi sit amet ipsum. Nulla commodo, purus id ornare vestibulum,
        diam mauris ultricies felis, sit amet molestie dolor nulla ut urna.
        Integer mattis. Integer nec tellus id enim pretium condimentum. Nulla
        molestie ligula id nisl. Donec dictum. Nullam egestas, mi id gravida
        sollicitudin, nisl elit commodo dolor, a porta ligula sapien id risus.
        Vestibulum eleifend orci id augue. Phasellus rhoncus scelerisque eros.
        Ut sodales mauris vel dolor. Nam sodales ultricies orci. Pellentesque
        felis lacus, feugiat sed, lobortis nec, aliquam et, est. </p>
      <p>Morbi
        gravida porta odio. Sed lectus nisl, consequat ac, tincidunt et, mattis
        et, est. Donec eget tellus eu arcu adipiscing rhoncus. Phasellus magna.
        Donec dapibus velit mollis augue. Sed pretium nunc ac elit sollicitudin
        semper. Integer nibh. Morbi dolor nisl, laoreet eu, vulputate ac,
        faucibus eu, ante. Mauris lobortis enim ut mi. Sed scelerisque sapien
        ac risus. Suspendisse cursus eleifend sapien. </p>
      <p>Aenean
        congue tristique elit. Fusce varius congue est. Morbi ultrices dapibus
        orci. Duis euismod elit eget sem. Nullam vehicula augue nec elit. Duis
        in mauris. Pellentesque venenatis orci non ante. Duis gravida nunc a
        tellus. Donec vitae augue. Nunc nec nibh quis lacus vestibulum dictum.
        Nulla quis pede. Nullam turpis dolor, fermentum et, commodo sed,
        aliquet auctor, lorem. Sed sit amet ipsum. Sed tellus mauris, auctor a,
        egestas sit amet, tempus sit amet, massa. Quisque placerat ante nec
        nunc. Praesent dignissim mi vitae dui. Curabitur sit amet pede vel ante
        condimentum fermentum. Suspendisse dolor turpis, rhoncus sed, ultricies
        ac, pulvinar nec, erat. </p>
    </div>
  </div>
  <!-- end of content -->
  <div id="push"></div>
</div>
<div id="footer">
  <div id="insidefo oter">
    <p>Put your footer stuff here.</p>
    <div style="clear: both;"></div>
  </div>
</div>
<!-- End of StatCounter Code -->
</body>
</html>

Open in new window

0
 
yessirnosirCommented:
Hi again...   fixed that missing background image by hanging it on an outerwrap div.
Have a look at this and see how close we are to what you want... so far I think it works in FF and IE7.  It breaks in IE6 right now (will need to use IE expressions for min/max width), but let's get it the way you want it in FF first, and then worry about IE6.

Also have attached a screenshot just to make sure we are looking at the same thing.  The pink on the footer is just a temporary diagnostic tool to show where the footer is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="style-ie.css" >
	<![endif]-->
<link rel="stylesheet" type="text/css" href="coralfoot_files/menu_.css">
<style type="text/css">
* {
	margin: 0;
	padding:0;
}
body {
	font-size: 62.5%;
	background-image: url(bg_thinbar.jpg);
	background-repeat:repeat-y;
	background-position:top center;
	background-color:#759baa;
	text-align:center;
}
html, body {
	height: 100%;
}
#outerwrap {
	height:100%;
	background-image:url(top_back.jpg);
	background-position:top center;
	background-repeat:no-repeat;
}
#wrapper {
	min-width: 752px;
	max-width: 1026px;
	background-color:#EAF2F5;
	min-height: 100%;
	height: auto;
	margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
#header {
	background-image:url(topsides_.jpg);
	background-position: top center;
	background-repeat:no-repeat;
	text-align: center;
	height:185px;
	z-index:16;
}
#main-content {
	background-color:#EAF2F5;
	min-width: 752px;
	max-width: 1026px;
	margin:0 auto;
}
.content {
	background-color:#EAF2F5;
	text-align: left;
	background-image:url(largebottom4.jpg);
	background-repeat:no-repeat;
	padding-right:20px;
	padding-left:20px;
	padding-top: 20px;
	padding-bottom:60px;
}
#push {
	height: 100px; /* #push must be the same height as #footer */
}
#footer {
	position:relative;
	min-width: 752px;
	max-width: 1026px;
	margin: 0px auto;
	background-color:/*#EAF2F5*/pink;
	height:100px;
}
img {
	border: none;
}
h2 {
	font: 1.8em Tahoma, sans-serif;
	color: green;
	margin-bottom: 10px;
}
p {
	font: 1.2em/1.8em Tahoma, sans-serif;
	margin-top: 10px;
}
/*#footerwrap {
	min-width: 752px;
	max-width: 1026px;
	margin: 0px auto;
	background-color:#EAF2F5;
	height:100%;
	min-height:100%;
}*/
/*#page-wrap {
	background-color:#EAF2F5;
	z-index:2;
}*/
#inside {
/*position:relative;*/
	/*background-color:#EAF2F5;*/
	/*min-height:100%;*/
	
	/*z-index:3;*//*margin-bottom: 6em;*/ /*Modify value as needed for
footer height.*/
	/*height: auto;*/
	/*padding-bottom:6em;*/
}
/*#main-content {
	background-color:#EAF2F5;
	text-align: left;
	background-image:url(largebottom4.jpg);
	background-repeat:no-repeat;
	padding-right:20px;
	padding-left:20px;
	padding-top: 20px;
	padding-bottom:60px;
	z-index:1;
	_height: 0;
}*/
#overlay {
	position:absolute;
	top:0px;
	left:0px;
	z-index:5;
}
/*#centeringhead {
	position:absolute;
	left:50%;
	margin-left:-376px;
	width:752px;
	text-align: center;
	z-index: 100;
}*/
/*#flasher {
	display:none;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-376px;
	width:752px;
	text-align: center;
	z-index:101;
}*/
#member2 {
	padding-right:40px;
	padding-bottom:20px;
	clear:both;
	float:left;
	width:190px;
	height:208px;
	z-index: 8;
}
#insidefooter {
	width:752px;
	left:50%;
	margin-left:-376px;
	text-align:center;
	position: absolute;
	bottom: 0;
	background-color:#EAF2F5;
	z-index:900;
	background-color: #EAF2F5;
}
.style1 {
	color: #284861
}
#menuwrapper {
	text-align:center;
	position:relative;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	width: 752px;
}
.style2 {
	font-size: 1em
}
a:link {
	text-decoration: underline;
	color: #2F298D;
}
a:visited {
	text-decoration: underline;
	color: #2B3F4A;
}
a:hover {
	text-decoration: none;
	color: #2C4672;
}
a:active {
	text-decoration: underline;
	color: #2B3F4A;
}
.style1 {
	font-family: Arial, Helvetica, sans-serif
}
.style4 {
	font-size: 16px;
	color: #f4793a;
}
.style5 {
	font-family: Geneva, Arial, Helvetica, sans-serif
}
.style6 {
	font-family: Verdana, Arial, Helvetica, sans-serif
}
.style7 {
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style9 {
	font-size: 18px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
.style10 {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #284861;
	font-size: 2em;
	font-weight: bold;
}
.style12 {
	font-family: Arial, Helvetica, sans-serif;
	color: #284861;
	font-size: 14px;
}
.style14 {
	font-family: Arial, Helvetica, sans-serif;
	color: #284861;
	font-size: 12px;
}
</style>
</head>
<body onload="document.getElementById('flasher').style.display = 'block'; ">
<div id="outerwrap">
  <div id="wrapper">
    <div id="header"> <a href="http://swanflighthaven.com/fluidwidthlayout/example/index_new6.html"><img src="coralfoot_files/clear.gif" alt="Home" title="Home" border="0" width="752" height="159"> </a>
      <div id="menuwrapper">
        <ul id="qm0" class="qmmc">
          <li><a href="javascript:void(0)">Our Pastor</a></li>
          <li><a href="javascript:void(0)">Our Beliefs</a></li>
          <li><a href="javascript:void(0)">Worship Services</a></li>
          <li><a class="qmparent" href="javascript:void(0)">Ministries »</a>
            <ul>
              <li><a class="qmparent" href="javascript:void(0)">Text»</a>
                <ul>
                  <li><a href="javascript:void(0);">Text</a></li>
                  <li><a href="javascript:void(0);">Text</a></li>
                </ul>
              </li>
              <li><a class="qmparent" href="javascript:void(0)">Text»</a>
                <ul>
                  <li><a href="javascript:void(0);">Text</a></li>
                  <li><a href="javascript:void(0);">Text</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="javascript:void(0);">Odyssey</a></li>
          <li><a href="javascript:void(0);">Announcements</a></li>
          <li><a href="javascript:void(0);">Links</a></li>
          <li class="qmclear">&nbsp;</li>
        </ul>
        <div id="menu_s">
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/pastor.html">Our Pastor</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/beliefs.html">Our Beliefs</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/worship.html">Worship Services</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/ministries.html">Ministries »</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/announcements.html">Odyssey</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/odyssey.html">Announcements</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/links.html">Links</a></div>
        </div>
      </div>
    </div>
    <div id="main-content">
      <div class="content">
        <!--<div id="centeringhead"><a href="#"><img src="coralfoot_files/clear.gif" alt="Home" title="Home" border="0" width="752" height="159"> </a></div>
        
        <div style="display: block;" id="flasher"> Flash Content </div>-->
        <div id="member2"><img src="coralfoot_files/clear.gif" alt="members" width="200" height="218"></div>
        <br>
        <br>
        <h2 class="style1">Welcome to our Church </h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
          mollis, massa nec posuere molestie, eros nisi consectetur urna, eu
          dictum massa magna a dolor. Fusce luctus urna id est. Vestibulum
          euismod nisi sit amet ipsum. Nulla commodo, purus id ornare vestibulum,
          diam mauris ultricies felis, sit amet molestie dolor nulla ut urna.
          Integer mattis. Integer nec tellus id enim pretium condimentum. Nulla
          molestie ligula id nisl. Donec dictum. Nullam egestas, mi id gravida
          sollicitudin, nisl elit commodo dolor, a porta ligula sapien id risus.
          Vestibulum eleifend orci id augue. Phasellus rhoncus scelerisque eros.
          Ut sodales mauris vel dolor. Nam sodales ultricies orci. Pellentesque
          felis lacus, feugiat sed, lobortis nec, aliquam et, est. </p>
        <p>Morbi
          gravida porta odio. Sed lectus nisl, consequat ac, tincidunt et, mattis
          et, est. Donec eget tellus eu arcu adipiscing rhoncus. Phasellus magna.
          Donec dapibus velit mollis augue. Sed pretium nunc ac elit sollicitudin
          semper. Integer nibh. Morbi dolor nisl, laoreet eu, vulputate ac,
          faucibus eu, ante. Mauris lobortis enim ut mi. Sed scelerisque sapien
          ac risus. Suspendisse cursus eleifend sapien. </p>
        <p>Aenean
          congue tristique elit. Fusce varius congue est. Morbi ultrices dapibus
          orci. Duis euismod elit eget sem. Nullam vehicula augue nec elit. Duis
          in mauris. Pellentesque venenatis orci non ante. Duis gravida nunc a
          tellus. Donec vitae augue. Nunc nec nibh quis lacus vestibulum dictum.
          Nulla quis pede. Nullam turpis dolor, fermentum et, commodo sed,
          aliquet auctor, lorem. Sed sit amet ipsum. Sed tellus mauris, auctor a,
          egestas sit amet, tempus sit amet, massa. Quisque placerat ante nec
          nunc. Praesent dignissim mi vitae dui. Curabitur sit amet pede vel ante
          condimentum fermentum. Suspendisse dolor turpis, rhoncus sed, ultricies
          ac, pulvinar nec, erat. </p>
      </div>
    </div>
    <!-- end of content -->
    <div id="push"></div>
  </div>
  <div id="footer">
    <div id="insidefooter">
      <p>Put your footer stuff here.</p>
      <div style="clear: both;"></div>
    </div>
  </div>
</div>
<!-- End of StatCounter Code -->
</body>
</html>

Open in new window

coral-footer.jpg
0
 
yessirnosirCommented:
I realized after last post that I had a redundant div in the #main-content & .content pair.  That's what happens when you try to fit one layout into another.  So I got rid of #main-content.  Also noticed that your ie stylesheet already had the width expressions figured out, so I added that back in, and I think the attached code works in FF, IE7 and IE6.  There was a little problem with a thin white gap below the menu in IE6.  You'll see I commented out an <li> class qmclear to get rid of that -- not sure if that will cause other problems.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
<link rel="stylesheet" type="text/css" href="coralfoot_files/menu_.css">
<style type="text/css">
* {
	margin: 0;
	padding:0;
}
body {
	font-size: 62.5%;
	background-image: url(bg_thinbar.jpg);
	background-repeat:repeat-y;
	background-position:top center;
	background-color:#759baa;
	text-align:center;
}
html, body {
	height: 100%;
}
#outerwrap {
	height:100%;
	background-image:url(top_back.jpg);
	background-position:top center;
	background-repeat:no-repeat;
}
#wrapper {
	min-width: 752px;
	max-width: 1026px;
	background-color:#EAF2F5;
	min-height: 100%;
	height: auto;
	margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
#header {
	background-image:url(topsides_.jpg);
	background-position: top center;
	background-repeat:no-repeat;
	text-align: center;
	height:185px;
	z-index:16;
}
#main-content {
	background-color:#EAF2F5;
}
.content {
	background-color:#EAF2F5;
	text-align: left;
	background-image:url(largebottom4.jpg);
	background-repeat:no-repeat;
	padding-right:20px;
	padding-left:20px;
	padding-top: 20px;
	padding-bottom:60px;
}
#push {
	height: 100px; /* #push must be the same height as #footer */
}
#footer {
	position:relative;
	min-width: 752px;
	max-width: 1026px;
	margin: 0px auto;
	background-color:/*#EAF2F5*/pink;
	height:100px;
}
img {
	border: none;
}
h2 {
	font: 1.8em Tahoma, sans-serif;
	color: green;
	margin-bottom: 10px;
}
p {
	font: 1.2em/1.8em Tahoma, sans-serif;
	margin-top: 10px;
}
#overlay {
	position:absolute;
	top:0px;
	left:0px;
	z-index:5;
}
/*#centeringhead {
	position:absolute;
	left:50%;
	margin-left:-376px;
	width:752px;
	text-align: center;
	z-index: 100;
}*/
/*#flasher {
	display:none;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-376px;
	width:752px;
	text-align: center;
	z-index:101;
}*/
#member2 {
	padding-right:40px;
	padding-bottom:20px;
	clear:both;
	float:left;
	width:190px;
	height:208px;
	z-index: 8;
}
#insidefooter {
	width:752px;
	left:50%;
	margin-left:-376px;
	text-align:center;
	position: absolute;
	bottom: 0;
	background-color:#EAF2F5;
	z-index:900;
	background-color: #EAF2F5;
}
.style1 {
	color: #284861
}
#menuwrapper {
	text-align:center;
	position:relative;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	width: 752px;
}
.style2 {
	font-size: 1em
}
a:link {
	text-decoration: underline;
	color: #2F298D;
}
a:visited {
	text-decoration: underline;
	color: #2B3F4A;
}
a:hover {
	text-decoration: none;
	color: #2C4672;
}
a:active {
	text-decoration: underline;
	color: #2B3F4A;
}
.style1 {
	font-family: Arial, Helvetica, sans-serif
}
.style4 {
	font-size: 16px;
	color: #f4793a;
}
.style5 {
	font-family: Geneva, Arial, Helvetica, sans-serif
}
.style6 {
	font-family: Verdana, Arial, Helvetica, sans-serif
}
.style7 {
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style9 {
	font-size: 18px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
.style10 {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #284861;
	font-size: 2em;
	font-weight: bold;
}
.style12 {
	font-family: Arial, Helvetica, sans-serif;
	color: #284861;
	font-size: 14px;
}
.style14 {
	font-family: Arial, Helvetica, sans-serif;
	color: #284861;
	font-size: 12px;
}
</style>
<!--[if lt IE 7]>
<style>
#wrapper, #footer {	width:expression(document.body.clientWidth < 754? "752px" : document.body.clientWidth > 1028? "1026px" : "auto");}
#wrapper {height:100%; }
</style>
<![endif]-->
</head>
<body onload="document.getElementById('flasher').style.display = 'block'; ">
<div id="outerwrap">
  <div id="wrapper">
    <div id="header"> <a href="http://swanflighthaven.com/fluidwidthlayout/example/index_new6.html"><img src="coralfoot_files/clear.gif" alt="Home" title="Home" border="0" width="752" height="159"> </a>
      <div id="menuwrapper">
        <ul id="qm0" class="qmmc">
          <li><a href="javascript:void(0)">Our Pastor</a></li>
          <li><a href="javascript:void(0)">Our Beliefs</a></li>
          <li><a href="javascript:void(0)">Worship Services</a></li>
          <li><a class="qmparent" href="javascript:void(0)">Ministries »</a>
            <ul>
              <li><a class="qmparent" href="javascript:void(0)">Text»</a>
                <ul>
                  <li><a href="javascript:void(0);">Text</a></li>
                  <li><a href="javascript:void(0);">Text</a></li>
                </ul>
              </li>
              <li><a class="qmparent" href="javascript:void(0)">Text»</a>
                <ul>
                  <li><a href="javascript:void(0);">Text</a></li>
                  <li><a href="javascript:void(0);">Text</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="javascript:void(0);">Odyssey</a></li>
          <li><a href="javascript:void(0);">Announcements</a></li>
          <li><a href="javascript:void(0);">Links</a></li>
          <!--<li class="qmclear">&nbsp;</li>    this causes a white space below menu in IE6; purpose???? -->
        </ul>
        <div id="menu_s">
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/pastor.html">Our Pastor</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/beliefs.html">Our Beliefs</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/worship.html">Worship Services</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/ministries.html">Ministries »</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/announcements.html">Odyssey</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/odyssey.html">Announcements</a></div>
          <div class="nav2"><a href="http://swanflighthaven.com/fluidwidthlayout/example/links.html">Links</a></div>
        </div>
      </div>
    </div>
    <div class="content">
      <!--<div id="centeringhead"><a href="#"><img src="coralfoot_files/clear.gif" alt="Home" title="Home" border="0" width="752" height="159"> </a></div>
        
        <div style="display: block;" id="flasher"> Flash Content </div>-->
      <div id="member2"><img src="coralfoot_files/clear.gif" alt="members" width="200" height="218"></div>
      <br>
      <br>
      <h2 class="style1">Welcome to our Church </h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
        mollis, massa nec posuere molestie, eros nisi consectetur urna, eu
        dictum massa magna a dolor. Fusce luctus urna id est. Vestibulum
        euismod nisi sit amet ipsum. Nulla commodo, purus id ornare vestibulum,
        diam mauris ultricies felis, sit amet molestie dolor nulla ut urna.
        Integer mattis. Integer nec tellus id enim pretium condimentum. Nulla
        molestie ligula id nisl. Donec dictum. Nullam egestas, mi id gravida
        sollicitudin, nisl elit commodo dolor, a porta ligula sapien id risus.
        Vestibulum eleifend orci id augue. Phasellus rhoncus scelerisque eros.
        Ut sodales mauris vel dolor. Nam sodales ultricies orci. Pellentesque
        felis lacus, feugiat sed, lobortis nec, aliquam et, est. </p>
      <p>Morbi
        gravida porta odio. Sed lectus nisl, consequat ac, tincidunt et, mattis
        et, est. Donec eget tellus eu arcu adipiscing rhoncus. Phasellus magna.
        Donec dapibus velit mollis augue. Sed pretium nunc ac elit sollicitudin
        semper. Integer nibh. Morbi dolor nisl, laoreet eu, vulputate ac,
        faucibus eu, ante. Mauris lobortis enim ut mi. Sed scelerisque sapien
        ac risus. Suspendisse cursus eleifend sapien. </p>
      <p>Aenean
        congue tristique elit. Fusce varius congue est. Morbi ultrices dapibus
        orci. Duis euismod elit eget sem. Nullam vehicula augue nec elit. Duis
        in mauris. Pellentesque venenatis orci non ante. Duis gravida nunc a
        tellus. Donec vitae augue. Nunc nec nibh quis lacus vestibulum dictum.
        Nulla quis pede. Nullam turpis dolor, fermentum et, commodo sed,
        aliquet auctor, lorem. Sed sit amet ipsum. Sed tellus mauris, auctor a,
        egestas sit amet, tempus sit amet, massa. Quisque placerat ante nec
        nunc. Praesent dignissim mi vitae dui. Curabitur sit amet pede vel ante
        condimentum fermentum. Suspendisse dolor turpis, rhoncus sed, ultricies
        ac, pulvinar nec, erat. </p>
    </div>
    <!-- end of content -->
    <div id="push"></div>
  </div>
  <div id="footer">
    <div id="insidefooter">
      <p>Put your footer stuff here.</p>
      <div style="clear: both;"></div>
    </div>
  </div>
</div>
<!-- End of StatCounter Code -->
</body>
</html>

Open in new window

0
 
Coral3Author Commented:
Yessirnosir, you are a rockstar CSS god!  This looks absolutely perfect.  Thank you for the way you commented out some of the other divs that weren't being used, that was extremely helpful.  And you cleaned up my messy code beautifully.  It's such a relief to have a footer that WORKS with this design!! :)

I checked at Browsershots.org and IE6 looks fantastic, and so does 5.5 for that matter.  You're right about that div, it doesn't seem to serve any purpose that I can see, and even though I can't test the usability of the menu on IE6, it looks great, so I'm trusting that.

Thank you again for solving a problem I've been working on for days!!  You deserve a big A+.
0
 
Coral3Author Commented:
Thanks again for being so fast, helpful and thorough!!
0
 
yessirnosirCommented:
you're welcome... glad that's working for you.

btw... re "you cleaned up my messy code", I actually was a Dreamweaver user for an embarrassingly long time when one day I discovered the "Apply Source Formatting" command that automatically formats everything with one mouse click.   So now my code always looks good, even if the website doesn't!!!  

re: the menu usability in IE6, it doesn't look like the dropdown works.  I'm not familiar with that "QuickMenu" so am not sure what needs to be done.  Probably best to go back to the Quickmenu documentation and check what they do for  IE6 compatibility.

There are ways to install IE6 for testing.  The most reliable way is in a virtual machine, but on my machine (XP) I followed these instructions   http://tredosoft.com/Multiple_IE 
To get the conditional comments to work correctly, you also have to do the registry tweak in the middle of this page.  http://tredosoft.com/IE7_standalone

0
 
Coral3Author Commented:
Yessirnosir,

Well I guess that teaches me to trust something without testing it. :)

I'm using the menu created by this application, v7: http://www.opencube.com/download.asp.  I thought their menu was IE6 compatible, so I'm going to have to figure out if I deleted something important when I was editing it.

Thanks for that fantastic link, I had no idea that Multiple IE application was even out there.  Last time I tried to install IE6 on my machine alongside IE7, it slowed it my computer down to the point I could barely use it.
 
I installed the app, followed the directions and tweaked the registry, but for whatever reason I'm still seeing that white space underneath the menu in IE6, even with that problem li commented out.  All the other conditional comments are working, though.  The problem doesn't show up on Browsershots.org IE6 nor yours, so I assume something is wrong with mine.  I have no idea what, though?

Thanks again for all your help. :)
0
 
Coral3Author Commented:
P.S. I've also been using Dreamweaver for years, and never knew about the Apply Source Formatting!!  Good to know! :)
0
 
Coral3Author Commented:
Just wanted to let you know I got the menu to work in IE6.

http://www.swanflighthaven.com/fluidwidthlayout/example/testing_4.html

It seems I don't have the option of disabling Javascript for IE6 with this application for testing, however, am I correct?  And when I use it I still see that white space under the menu, even though I deleted that line altogether.  Oh well, I trust that Browsershots.org is showing me the correct interpretation of what my page looks like on IE6, and this Multiple IE app is definitely a useful tool in addition. :)
0
 
yessirnosirCommented:
Hi again... strange that you are seeing a white space... I just checked again on your live site in IE6 and the menu is working and there is no white space.  Maybe a browser cache problem?   I've heard other people report strange problems with multiple IE installations, but for me it worked first time, so not sure what might be going on.

re: javascript for IE6, it's true for most dropdowns that they don't work in IE6 without some Javascript, because IE6 doesn't support "hover" completely.  The old standby "Suckerfish" dropdown (http://htmldog.com/articles/suckerfish/dropdowns/)  uses a very compact JS to handle the problem.  A lot of menus use the whatever:hover approach (http://www.xs4all.nl/~peterned/csshover.html)  eg here's one I've used http://sperling.com/examples/menuh/ .  That menu works with pure CSS for IE7 and FF, but uses csshover.htc for IE6.

If you want to build a menu that is completely JS-free, there are a bunch of clever examples on the "cssplay" website.  eg.  this one is good http://www.cssplay.co.uk/menus/final_drop.html .  To avoid JS, there is some markup in the HTML that is inside conditional comments, that creates a table structure in IE6.  It takes a while to get the hang of creating a menu that way, but in the end it works really well.  (and you've got to admire Stu Nicholls for even dreaming up the approach).

Good luck!
0
 
Coral3Author Commented:
Yessirnosir,

I just wanted to thank you for all those great links for menus. :)  I knew about the sperling site and the CSSPlay.  I tried to edit Stu's menu to fit my design, but I was having trouble making it look just the way I wanted, plus he requires that you give him payment if you use it for a site that you were hired to do (which mine is).  I'm not against paying him since he has truly innovative solutions and he put so much work into it, but since I couldn't get it to work the way I wanted I'll opt not to go that route utnil I can make it fit better.  The sperling menu looks promising...I had that in my favorites but had forgotten about it.  Looks a lot simpler than the current JS I have for the opencube menu.

Glad the white space is just on my end.  Thanks again for all your help!! :)

~Coral  
0
 
yessirnosirCommented:
you're welcome...  glad things are working out for you.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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