Footer problem -- again! )c:

Hi all
I have looked and looked ~~ can’t find the solution to exactly what is happening.:frowning:
I’ve manage to get the footer to stay at the bottom, of the text but it doesn’t stay at the bottom of the screen. It scrolls with the content. There’s about a 300(?)px space between the bottom of the page and the bottom of the footer. I have managed to get the footer at the bottom, many tries ago, but the text rolled behind it. Not the effect I wanted.
So the question is how do I get the footer actually at the bottom of the page?
Help please.

		
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Summit County Garden Club</title>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 1em;
			color: #000;
			line-height: 1.25em;
			background-image: url(images/garden-sign-background.jpg);
			background-repeat: no-repeat;
			border-top: 2px solid #0bb336;
		}
		#floral-background {
			background-image: url(images/background-floral.png);
			min-height: 100%;
			background-attachment: fixed;
		}
		#header {
			background-image: url(images/title-image.png);
			background-repeat: no-repeat;
			margin: auto;
			margin-top: 20px;
			padding: 0;
			margin-bottom: -18px;
			height: 116px;
			width: 883px;
		}
		#content-container {
			background-repeat: no-repeat;
			margin: auto;
			margin-top: 60px;
			padding: 0;
			margin-bottom: -8px;
			/*height: 116px;*/
			width: 883px;

		}
		 ul#top-nav {
			text-align: center;
			width: 860px;
			padding-left: -56px;	
			margin-left: -56px;
			padding-top: 80px;
		}
		#top-nav li{
			list-style: none;
			display: inline;
			padding: 10px;
		}
		.contact-us {
			padding-left: 4px;	
			margin-left: 4px;
		}
		.home {
			padding-right: -21px;	
			margin-right: -21px;
		}
		#clear-footer {
			clear: both;	
		}
		#footer {
			background-image: url(images/bottom-floral.jpg);
			background-repeat: repeat-x;
			height: 284px;
			min-height: 100%;
			clear: both;
		}
		
		/******* FORMATTING ********/
		#header-title {
			margin-left: -9999px;
			font-size: .1em;	
		}
		
		/******* LINKS ********/
		#top-nav a {
			text-decoration: none;
			padding-left: 62px;
			font-size: 1.10em;
			color: #000;
		}
		#top-nav a:hover {
			background-image: url(images/nav-graphic.png);
			background-repeat: no-repeat;
			padding-left: 62px;
			font-size: 1.10em
		}		
		
	</style>
</head>

<body>
	<div id="floral-background">
			<div id="header">
				<h1 id="header-title">Summit County Garden Club</h1>
				<ul id="top-nav">
					<li class="home"><a href="#">Home</a></li>
					<li><a href="#">Garden Tour</a></li>
					<li><a href="#">FAQs</a></li>
					<li><a href="#">Resources &amp; Links</a></li>
					<li class="contact-us"><a href="#">Contact Us</a></li>				
				</ul>	
			</div>			
			<div id="content-container">
				<div id="content-left">
					<p>Morbi orci nunc, tincidunt id molestie vitae, feugiat eu dolor. Donec tempor nunc id metus ultrices at tristique odio porta. Mauris pharetra mattis ante, ac sollicitudin risus pulvinar eget. Pellentesque eu metus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus posuere sollicitudin augue, a ullamcorper justo volutpat quis. Vestibulum mollis arcu id nisl suscipit non malesuada orci facilisis. Donec pretium, tortor ac pulvinar aliquam, sapien leo pulvinar diam, non tempor lectus justo sit amet velit. Vivamus ultricies ante et tellus condimentum a pulvinar neque gravida. Praesent consectetur, eros eget sagittis elementum, metus orci hendrerit ante, sit amet posuere ipsum massa vel augue. Vestibulum ac metus ac velit tincidunt vulputate. Sed bibendum pulvinar ante, sed vestibulum enim facilisis eu. Curabitur ullamcorper pharetra quam, eu laoreet est euismod sit amet.</p>
					<p>Morbi orci nunc, tincidunt id molestie vitae, feugiat eu dolor. Donec tempor nunc id metus ultrices at tristique odio porta. Mauris pharetra mattis ante, ac sollicitudin risus pulvinar eget. Pellentesque eu metus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus posuere sollicitudin augue, a ullamcorper justo volutpat quis. Vestibulum mollis arcu id nisl suscipit non malesuada orci facilisis. Donec pretium, tortor ac pulvinar aliquam, sapien leo pulvinar diam, non tempor lectus justo sit amet velit. Vivamus ultricies ante et tellus condimentum a pulvinar neque gravida. Praesent consectetur, eros eget sagittis elementum, metus orci hendrerit ante, sit amet posuere ipsum massa vel augue. Vestibulum ac metus ac velit tincidunt vulputate. Sed bibendum pulvinar ante, sed vestibulum enim facilisis eu. Curabitur ullamcorper pharetra quam, eu laoreet est euismod sit amet.</p>
				</div>
				<div id="content-right">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu augue, adipiscing tempor varius vitae, pharetra et augue. Pellentesque a cursus neque. Morbi dignissim ipsum vel neque iaculis accumsan. Quisque nec vestibulum libero. Vivamus elit ipsum, molestie sed condimentum ac, scelerisque in sapien. Fusce iaculis venenatis urna eu dapibus. Nam condimentum massa ipsum, vel ultrices quam. Nullam ligula elit, faucibus id congue nec, semper id sem. Suspendisse potenti. Ut mauris erat, pretium et pellentesque nec, malesuada in libero. Integer metus nibh, tristique ut tincidunt at, volutpat sit amet libero.</p>
					<p>Morbi orci nunc, tincidunt id molestie vitae, feugiat eu dolor. Donec tempor nunc id metus ultrices at tristique odio porta. Mauris pharetra mattis ante, ac sollicitudin risus pulvinar eget. Pellentesque eu metus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus posuere sollicitudin augue, a ullamcorper justo volutpat quis. Vestibulum mollis arcu id nisl suscipit non malesuada orci facilisis. Donec pretium, tortor ac pulvinar aliquam, sapien leo pulvinar diam, non tempor lectus justo sit amet velit. Vivamus ultricies ante et tellus condimentum a pulvinar neque gravida. Praesent consectetur, eros eget sagittis elementum, metus orci hendrerit ante, sit amet posuere ipsum massa vel augue. Vestibulum ac metus ac velit tincidunt vulputate. Sed bibendum pulvinar ante, sed vestibulum enim facilisis eu. Curabitur ullamcorper pharetra quam, eu laoreet est euismod sit amet.</p>
					<p>Morbi orci nunc, tincidunt id molestie vitae, feugiat eu dolor. Donec tempor nunc id metus ultrices at tristique odio porta. Mauris pharetra mattis ante, ac sollicitudin risus pulvinar eget. Pellentesque eu metus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus posuere sollicitudin augue, a ullamcorper justo volutpat quis. Vestibulum mollis arcu id nisl suscipit non malesuada orci facilisis. Donec pretium, tortor ac pulvinar aliquam, sapien leo pulvinar diam, non tempor lectus justo sit amet velit. Vivamus ultricies ante et tellus condimentum a pulvinar neque gravida. Praesent consectetur, eros eget sagittis elementum, metus orci hendrerit ante, sit amet posuere ipsum massa vel augue. Vestibulum ac metus ac velit tincidunt vulputate. Sed bibendum pulvinar ante, sed vestibulum enim facilisis eu. Curabitur ullamcorper pharetra quam, eu laoreet est euismod sit amet.</p>
				</div>
			</div>
		</div>
		<div id="clear-footer"></div>
		<div id="footer"></div>	
</body>
</html>


Thank you all, with your help, it works now!

I wanted the top green bar to run all across the page instead of just the header so I added that border to the #container.

the help is great and I learned a lot.

thank you all for great information,
In regards to Alex’s comment

Do note that I’ve left a lot of your (probably improper) coding habits intact in my version due to not having the images. With that said, I have cleaned up your markup and CSS a little and I did move the CSS into a separate file.

and Paul’s about “having progressed too far”.
Here’s the latest – showing hopefully the appropriate fixes having taken into account comments. Please do advise where it’s still bad and needs work.
http://mmnkltd.com/trials/garden-club/trial04.html Just hoping to learn.
BTW, I’ll put all the CSS in a separate file when it’s done being tweaked. I do know that’s the correct location for it.
My appreciation,

I suspected as much. Thanks for clarifying - that explains a lot.

I understand where you are coming from a little better now. Sorry if I jumped on you about your post – it’s not that it was “snotty” but just didn’t give enough supporting explanations.

I’m not AS opposed to hacks as you seem to be, though I agree that they should be avoided if possible. As you mentioned, that’s not always possible.

I still think that IE conditional stylesheets are near useless.

I disagree with your comments regarding a load time increase due to hacks. While it’s obvious that some amount of load time is required to pass the CSS I don’t think it’s unusually slow to load hacks. In fact, many of the implemented hacks are ignored by browsers that they don’t apply to. The required time to download, assess and render a hack is nearly unnoticeable.

That said, creating a separate stylesheet for your hacks is a bad idea and directly conflicts with your very opinions. You see, the time required for separate file client/server “handshaking” and conditional logic (whether PHP, ie conditionals or other) probably INCREASES load time - not reduces it.

I also disagree with your comments regarding “future headaches” due to hacks. Most hacks properly target the browser intended and have no effect on future browser updates. While it may be true in rare cases that hacks cause future problems I just don’t think we should generalize because that’s rarely the case.

Hi,

The example of mine you are using is very old (about 6 years old I think) and was designed to support IE5 PC and IE5 mac. These days you can leave out support for IE5 as the usage is virtually nil.

The mac hacks were for IE5 mac and as that is long dead you don’t need the comment hiding technique (which is actually broken in your example because you left the last comment rule out).

The voice family hack was a hack for IE5 to stop it reading he next rule and that can also be removed as IE5 pc is dead also.

Therefore you are left with ie6 code only:


* html, * html body {
    overflow:hidden;
    padding:0;
    margin:0;
}
* html #outer {
    overflow:auto;
    height:99.9&#37;;
}
* html #contain-all {
    position:absolute;
    overflow-y:scroll;
    width:100%;
    height:100%;
    z-index:1;
}
* html #footer-inner {
    margin-right:17px;
}


Fixed positioning is usually best for small footers that always sit at the bottom without being too obtrusive and I wouldn’t use them for a large footer like yours because you hide so much content that you then have to scroll up to see. You would have been better off with a sticky footer as shown in the FAQ thread (a sticky footer is one that that sits at the bottom of the viewport when there is little content and at the bottom of the document when content is below the fold).

However you seem to have progressed too far now anyway :slight_smile:

There is no such thing as negative padding and it will invalidate the rule and no padding should be applied. Which in the case of lists mean you will get the default left padding that some browsers apply.

A final thought would be to ignore IE6 for the fixed positioning and just let it have a perfectly normal usual footer and let the good browsers get on with the task. Also remember that when any content in a fixed footer is outside of the viewport it will be unreachable by scrolling.

Why do you make that suggestion? Which “hacks” are you referring to?

Why would someone do that? I try to support all browsers that support CSS2 well enough to even consider. (i.e. IE5.5/IE6+, etc.) That list is pretty much predetermined so there is really no need for deciding which browsers to support.

Why would you recommend using IE conditional stylesheets? In my experience IE conditional stylesheets are almost always unnecessary. I’m yet to find a logical real-world implementation of IE conditional stylesheets. Everytime I see them used, I find that I can create the same results without a conditional stylesheet with the same level of browser support and often with less markup/css.

What makes you say that? How would that apply to any of the currently implemented hacks?

I feel like there is little basis for most of what you’ve said there. Granted I didn’t write the original CSS for the implementation you’re referring – it’s a solution from well-known SitePoint member Paul O’B. Even though it’s not my code - I see nothing that’s blatantly problematic with it or the hacks it uses.

Better solutions to achieve the desired result (“sticky footer”) MAY exist - but I don’t know of any off hand. In order to be sure I would have to spend some time testing techniques. (time I don’t have at the moment, unfortunately — though I will add it to my to do list) Unless you are offering a hack-free, cross-browser solution in replacement for Paul’s — I don’t think you should be picking his hacks apart without some more logical basis to back up your claims.

Must give credit where credit is due - you got that right.

I’m awaiting approval of your attachment.

All of the hacks DO NOT apply to Mac. Some of them apply to mozilla (firefox) while others apply to IE5.5 on Mac. I suggest you leave them unless you’d like to lose support for potential viewers. The reason your Mac substitute (never heard of it, never will) didn’t show issues without the hacks is likely because you weren’t browsing on IE5.5 for Mac which is the specific browser that the hack I believe you are referring to was for.

If I were you I would ignore his/her comments regarding the hacks. As far as I can tell, they have no basis in reality and were unjustified. At least until we hear back from him regarding the reasoning behind his suggestions. I’m not claiming to know all, because I don’t. He could be right - but I’m not going to take that advice for granted from a 25 post member over Paul O’B’s without further explanation and evidence.

About the negative padding - he is right. I don’t know where you got that – but ‘kick it to the curb’ and forget it.

As for the navigation positioning - I’ll try to get you a rewrite tomorrow (heading to bed - 1:04 AM here) that fixes the navigation/header issues if I can find the time. (things are a bit hectic here right now) I would take a stab at it now but I’m waiting for your attachment to be approved.

I apologize if my reply came off as snotty. Was not my intention but here is some clarification on my post. :slight_smile:

To me using ‘hacks’ is a dirty band aid way of fixing things. I diligently practice developing sites that have no hacks.

Indeed in some cases they are unavoidable. Do I use them? yes. Do I like to use them? Only when they are absolutely necessary.

But if you can increase your skill set and learn how to code something without them, you save file size and increase page load times. And that counts for a lot these days with SEPR.

The ideal way I’m trying to work through is if you have to use more than a few, paste them in a separate style sheet and use php and script to call them when needed. Lazy load the CSS. Again a great technique in saving download times.

Not saying it’s wrong to do but it can definitely save you the headache down the road with future browser issues.

Alex, I’m not bagging on anyone’s code. In fact I’ve taken Pauls advice on many things. As you can see from his last post he has clarified that this was done 6 years ago. I will give credit in the fact that this was a great example that worked for its intended purposes back then.

Back to topic regarding Paul’s last post. I found this on a blog. Have you used first-child+html or the sort?

  • html #div {
    height: 300px;
    }

For IE7 only?

Never used it – I go for

*:first-child+html “selector here” {
height: 300px;
}

And this is what I’d use for IE6:

  • html “selector here” {
    height: 300px;
    }

Hi,
First off, in response to Alex’s request for what do I want it to look like, please see the attachment. Sorry for the lateness of that response to that request.
Secondly, about AtSea webdesign’s comments (thanks BTW):

I would strongly suggest removing the hacks in your CSS. Decide the browsers you are going to support first. If they require IE ‘hacks’ move them into a conditional style sheet.
Hacks will only introduce more problems down the road.

using Alex and RyanReese’s suggestion (http://www.pmob.co.uk/temp/fixedlayoutexample5.htm which references Paul O’Brien’s work, from what I understand, those are mac hacks.
The mac users are of significant numbers. I don’t have a mac but used as a (good?) substitute the Adobe BrowserLab: http://browserlab.adobe.com – the pages looked OK whether the hacks were there or not. …don’t know.
About

Second issue is AFAIK you can’t have negative values for padding. Only margins
I do see that being used. And you’re right about padding (see http://www.w3.org/TR/CSS2/box.html where they clearly say that.
That said, when I take out the negative padding value the position of the navigation changes. Thoughts on what gives?
So, back to the question about the location of the navigation, more ideas?
thanks!

Hi,

That’s a pretty good stab at it but you made a few little mistakes.:slight_smile:

You overwrote the negative margin on the outer by adding another margin:auto right underneath.:wink:

You can’t add a 2px border to the body because it will be 100% + 2px which will always be too big. Just use the border on the header as I did in my demo and make it 2px bigger than the negative margin it needs to soak up and you will get your top border.

The floated columns should really have a clearing mechanism for solidity so add overflow:hidden to the parent of the two floats.

Here’s the revised code (fixed for ie6 also):


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    height:100%;
}
html, body {
    margin:0;
    padding:0
}
body {/*has "garden" background */
    background:url(http://mmnkltd.com/trials/garden-club/images/garden-sign-background.jpg) no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#000;
    line-height:1.25em;
}
#outer { /*floral fixed element */
    min-height:100%;
    background: url(http://mmnkltd.com/trials/garden-club/images/background-floral.png) fixed;
    margin:-126px auto 0;/*footer height - this drags the outer 126px up through the top of the monitor */
}
* html #outer {
    height:100%
}
#container {
}
#footer { /*the height of the buffer and the amount of the negative margin specify height of footer, */
    height: 126px;
    background-image: url(http://mmnkltd.com/trials/garden-club/images/bottom-floral.jpg);
    background-repeat: repeat-x;
    clear: both;
}
#header {
    background:url(http://mmnkltd.com/trials/garden-club/images/title-image.png) no-repeat;
    margin: auto;
    border-top:128px solid #0bb336;
    padding:116px 0 0 0;
    width:883px;
}
#content-container {
    margin: 8px auto;
    padding:0;
    width:883px;
    overflow:hidden;
}
#content-left {
    width:400px;
    float:left;
    padding-left: 46px;
}
#content-right {
    width:375px;
    float:left;
    padding: 0 25px;
}
#header-title {
    margin:0 0 0 -9999px;
}
ul#top-nav {
    text-align:center;
    width:860px;
    margin:0 0 0 -86px;
}
#top-nav li {
    list-style:none;
    display:inline;
    padding:10px;
}
.contact-us {
    padding:0 0 0 4px;
    margin:0 0 0 4px;
}
.home {
    margin:0 -21px 0 0;
}
#header-title {
    margin:0 0 0 -9999px;
    font-size:.1em;
}
/******* LINKS *********/
#top-nav a {
    text-decoration:none;
    padding:0 0 0 62px;
    font-size:1.10em;
    color:#000;
    outline: none;
}
#top-nav a:hover {
    background:url(http://mmnkltd.com/trials/garden-club/images/nav-graphic.png) no-repeat;
    padding:0 0 0 62px;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
</style>
</head>
<body>
<div id="outer">
    <div id="container">
        <div id="header">
            <h1 id="header-title">Summit County Garden Club</h1>
            <ul id="top-nav">
                <li class="home"><a href="#">Home</a></li>
                <li><a href="#">Garden Tour</a></li>
                <li><a href="#">FAQs</a></li>
                <li><a href="#">Resources &amp; Links</a></li>
                <li class="contact-us"><a href="#">Contact Us</a></li>
            </ul>
        </div>
        <!-- #header -->
        <div id="content-container">
            <div id="content-left">
                <p>Morbi orci nunc, tincidunt id molestie vitae, feugiat eu dolor. Donec tempor nunc id metus ultrices at tristique odio porta. Mauris pharetra mattis ante, .</p>
            </div>
            <!-- end content-left -->
            <div id="content-right">
                <p>Morbi orci nunc, tincidunt id molestie vitae, feugiat eu dolor. Donec tempor nunc id metus ultrices at tristique odio porta. Mauris pharetra mattis ante, ac sollicitudin risus pulvinar eget. Pellentesque eu metus neque. Vestibulum ante ipsum primis in fau</p>
            </div>
            <!-- end content-right -->
        </div>
        <!-- end content-container div" -->
    </div>
    <!-- end container div" -->
</div>
<!-- end outer div" -->
<div id="footer"> </div>
<!-- end footer div" -->
</body>
</html>


Hope that helps :slight_smile:

Hi,

Much too complicated to remember easily :wink:

I use this instead:

  • html #test {background:blue}/* ie6 and under*/
    +html #test {background:red}/ ie7 */

I would strongly suggest removing the hacks in your CSS. Decide the browsers you are going to support first. If they require IE ‘hacks’ move them into a conditional style sheet.

Hacks will only introduce more problems down the road.

Second issue is AFAIK you can’t have negative values for padding. Only margins

Great progress.

There is too much room between the heading and the nav bar with Chrome and Safari, otherwise OK. About the navigation bar, actually I’d like the whole line to fit between the left edge and the right edge of the flower graphic. Had problems with that so I have the spacing horizontally as you see it.

Thoughts please.

good morning
Here’s a link to the site:
http://mmnkltd.com/trials/garden-club/trial02.html
Thanks for your continued help with this

That’s also what I see in FF when the images are applied in the way that you have. I don’t believe it’s an error on the part of FF - that’s how your code should display. If you explained your intended appearance (in other words, how you wanted it to look) it would be helpful.

The reason why you see a gap below your images in the footer is because you had the background image aligned to the top of the div by default and set to repeat-x. Since the image is shorter in height than the div, a gap shows below. In the following link I’ve simply aligned the background image to the bottom: http://www.alexstanford.com/helpingOthers/SitePoint/marioo/summitCountyGardenClub/

The footer is actually at the bottom. I think it’s possible that you accidentally set the footer to have more height than the background image.

I’ll try to recode your navigation/header properly for you when I get a chance.

Odd. The footer behaves exactly as intended in Opera for me. I thought it was the goal for the footer to stay at the bottom of the screen? If you’re talking about the actual background image not being at the bottom of the screen - then, I have explained that above. Also odd - the navigation does NOT appear in the proper position in Opera for me. The nav is showing “under” the header in Opera for me.

Please provide an example of how you would like the website to appear in your next post so that I have an idea of what I’m shooting for here.

The logo going over the navigation-you set the background image on #header and as a result the navigation is coming all the way up to slide on that.

Set top padding on the #header and remove the height :slight_smile:

#header{padding-top:116px;height:auto;/*was 116px*/}

Footer-you set a height of 283px (I think it was that) and the image is only 135px high, so the actual footer is sitting at the bottom of hte page (putting a border around it will confirm my statement)

Lower the height to the height of the image, and no more :wink:

#footer-inner{height:135px;}

Hi gents,
thanks for the replies.
Please take a look at the attached image. Implementing exactly what Alex wrote, that is what I see in FF.
The menu besides the footer still not being at the bottom of the page, the navigation is being hidden by the header in IE8 and FF. In Opera, the footer is at the bottom of the content but moves with the page and nav bar in the right location. Using Safari and Chrome the footer’s still not at the bottom, but the nav items are the right place.
Additionally, having the “no-repeat” in the same line as doesn’t display the image. When I remove the “no-repeat”, the image shows.
“background:url(images/garden-sign-background.jpg no-repeat);”
Hopefully the above makes sense.
thanks again

Hi,
thanks for the response. Yes, is the answer, I’d like the footer at the base of the page. applying the bottom: 0; and position: absolute; only makes it disappear.
Sorry, I just don’t get it.

If you look at that example above it clearly shows you how to do it :).

Marioo,

I’ve gone ahead and implemented the desired footer into your design as an example for you.

You can see a live preview here: http://www.alexstanford.com/helpingOthers/SitePoint/marioo/summitCountyGardenClub/

The HTML:

<!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>Summit County Garden Club</title>

    <meta
      http-equiv="Content-Type"
      content="text/html; charset=utf-8"
    />

    <link
      type="text/css"
      rel="stylesheet"
      href="screen.css"
      media="screen,projection,tv"
    />

  </head>


  <body>


    <div id="outer"><div id="contain-all"><div id="floral-background">

          <div id="header">

            <h1 id="header-title">Summit County Garden Club</h1>

            <ul id="top-nav">
              <li class="home">
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Garden Tour</a>
              </li>
              <li>
                <a href="#">FAQs</a>
              </li>
              <li>
                <a href="#">Resources &amp; Links</a>
              </li>
              <li class="contact-us">
                <a href="#">Contact Us</a>
              </li>				
            </ul>

          <!-- #header --></div>

          <div id="content-container"><div id="content-left">

              <p>
                Morbi orci nunc, tincidunt id molestie vitae, feugiat eu dolor. Donec tempor nunc id metus ultrices at tristique odio porta. Mauris pharetra mattis ante, ac sollicitudin risus pulvinar eget. Pellentesque eu metus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus posuere sollicitudin augue, a ullamcorper justo volutpat quis. Vestibulum mollis arcu id nisl suscipit non malesuada orci facilisis. Donec pretium, tortor ac pulvinar aliquam, sapien leo pulvinar diam, non tempor lectus justo sit amet velit. Vivamus ultricies ante et tellus condimentum a pulvinar neque gravida. Praesent consectetur, eros eget sagittis elementum, metus orci hendrerit ante, sit amet posuere ipsum massa vel augue. Vestibulum ac metus ac velit tincidunt vulputate. Sed bibendum pulvinar ante, sed vestibulum enim facilisis eu. Curabitur ullamcorper pharetra quam, eu laoreet est euismod sit amet.
              </p>

              <p>
                Morbi orci nunc, tincidunt id molestie vitae, feugiat eu dolor. Donec tempor nunc id metus ultrices at tristique odio porta. Mauris pharetra mattis ante, ac sollicitudin risus pulvinar eget. Pellentesque eu metus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus posuere sollicitudin augue, a ullamcorper justo volutpat quis. Vestibulum mollis arcu id nisl suscipit non malesuada orci facilisis. Donec pretium, tortor ac pulvinar aliquam, sapien leo pulvinar diam, non tempor lectus justo sit amet velit. Vivamus ultricies ante et tellus condimentum a pulvinar neque gravida. Praesent consectetur, eros eget sagittis elementum, metus orci hendrerit ante, sit amet posuere ipsum massa vel augue. Vestibulum ac metus ac velit tincidunt vulputate. Sed bibendum pulvinar ante, sed vestibulum enim facilisis eu. Curabitur ullamcorper pharetra quam, eu laoreet est euismod sit amet.
              </p>

            <!-- #content-left --></div>

            <div id="content-right">

              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu augue, adipiscing tempor varius vitae, pharetra et augue. Pellentesque a cursus neque. Morbi dignissim ipsum vel neque iaculis accumsan. Quisque nec vestibulum libero. Vivamus elit ipsum, molestie sed condimentum ac, scelerisque in sapien. Fusce iaculis venenatis urna eu dapibus. Nam condimentum massa ipsum, vel ultrices quam. Nullam ligula elit, faucibus id congue nec, semper id sem. Suspendisse potenti. Ut mauris erat, pretium et pellentesque nec, malesuada in libero. Integer metus nibh, tristique ut tincidunt at, volutpat sit amet libero.
              </p>

              <p>
                Morbi orci nunc, tincidunt id molestie vitae, feugiat eu dolor. Donec tempor nunc id metus ultrices at tristique odio porta. Mauris pharetra mattis ante, ac sollicitudin risus pulvinar eget. Pellentesque eu metus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus posuere sollicitudin augue, a ullamcorper justo volutpat quis. Vestibulum mollis arcu id nisl suscipit non malesuada orci facilisis. Donec pretium, tortor ac pulvinar aliquam, sapien leo pulvinar diam, non tempor lectus justo sit amet velit. Vivamus ultricies ante et tellus condimentum a pulvinar neque gravida. Praesent consectetur, eros eget sagittis elementum, metus orci hendrerit ante, sit amet posuere ipsum massa vel augue. Vestibulum ac metus ac velit tincidunt vulputate. Sed bibendum pulvinar ante, sed vestibulum enim facilisis eu. Curabitur ullamcorper pharetra quam, eu laoreet est euismod sit amet.
              </p>

              <p>
                Morbi orci nunc, tincidunt id molestie vitae, feugiat eu dolor. Donec tempor nunc id metus ultrices at tristique odio porta. Mauris pharetra mattis ante, ac sollicitudin risus pulvinar eget. Pellentesque eu metus neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus posuere sollicitudin augue, a ullamcorper justo volutpat quis. Vestibulum mollis arcu id nisl suscipit non malesuada orci facilisis. Donec pretium, tortor ac pulvinar aliquam, sapien leo pulvinar diam, non tempor lectus justo sit amet velit. Vivamus ultricies ante et tellus condimentum a pulvinar neque gravida. Praesent consectetur, eros eget sagittis elementum, metus orci hendrerit ante, sit amet posuere ipsum massa vel augue. Vestibulum ac metus ac velit tincidunt vulputate. Sed bibendum pulvinar ante, sed vestibulum enim facilisis eu. Curabitur ullamcorper pharetra quam, eu laoreet est euismod sit amet.
              </p>

        <!-- 
          #content-right, 
          #content-container, 
          #floral-background 
        --></div></div></div>

        <div class="spacer"></div>

    <!-- #contain-all, #outer --></div></div>

    <div id="footer"> 

      <div id="footer-inner">{Footer content here}</div>

    </div>


  </body>


</html>

and the CSS:

/* for ie mac*/
body {
  margin:0
}

/* commented backslash hack v2 \\*/ 
html, body {
  height:100&#37;;
  padding:0
} 

* html, * html body {
  overflow:hidden;
  padding:0 0 284px;
  margin:0 0 -284px;
  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;
} 

/* mac hide - reduce page to allow the scrollbar to remain visible \\*/
* html #footer-inner {
  margin-right:17px;
}

body {
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:1em;
  color:#000;
  line-height:1.25em;
  background:url(images/garden-sign-background.jpg no-repeat);
  border:2px solid #0bb336;
  border-width:2px 0 0;
}

#floral-background {
  background:url(images/background-floral.png) fixed;
  min-height:100%;
}

#header {
  background:url(images/title-image.png) no-repeat;
  margin:20px auto -18px;
  padding:0;
  height:116px;
  width:883px;
}

#content-container {
  margin:60px auto -8px;
  padding:0;
  width:883px;
}

ul#top-nav {
  text-align:center;
  width:860px;
  padding:80px 0 0 -56px;	
  margin:0 0 0 -56px;
}

#top-nav li{
  list-style:none;
  display:inline;
  padding:10px;
}

.contact-us {
  padding:0 0 0 4px;	
  margin:0 0 0 4px;
}

.home {
  padding:0 -21px 0 0;	
  margin:0 -21px 0 0;
}

#header-title {
  margin:0 0 0 -9999px;
  font-size:.1em;	
}

#top-nav a {
  text-decoration:none;
  padding:0 0 0 62px;
  font-size:1.10em;
  color:#000;
}

#top-nav a:hover {
  background:url(images/nav-graphic.png) no-repeat;
  padding:0 0 0 62px;
}		

#footer{
  position:absolute;
  bottom:0;
  width:100%;
  height:284px;
  z-index:999;
}

/* for moz/opera and others*/
html>body #footer {
  position:fixed
}

#footer-inner {
  height:284px;
  background:url(images/bottom-floral.jpg) repeat-x;
}

/* same height as footer/header to preserve space*/
.spacer {
  height:284px
}

Do note that I’ve left a lot of your (probably improper) coding habits intact in my version due to not having the images. With that said, I have cleaned up your markup and CSS a little and I did move the CSS into a seperate file.

If you would be kind enough to provide a live link to your current version of this site I may be able to do something better. I would need to pull the images and see the intended results in order to further optimize the page.

Cheers

The footer APPEARS to work properly in FireFox for my implementation.

I’m going to have to ask that you provide a link to a live copy of the page in question before I do any more troubleshooting. Without the images or seeing the exact code in question it’s too much of a guessing game.

If you don’t have a web server to use for a live copy at least attach the images and most recent code to your post.