7 Replies Latest reply on May 31, 2010 5:51 PM by R-Co

    Footer problems

    R-Co Level 1

      I'm having some trouble getting the footer on my page to behave properly. I want it to stay at the bottom of the viewport and stretch the full width. I found some CSS code to do it, and it works fine in Firefox and Safari, but not in IE, where it's indented about halfway across the page. The page in question is here: http://www.colbydesign.com/redesign/home.html and a screen shot from Browser Lab showing how it looks in IE7 is here: http://www.colbydesign.com/redesign/images/footer_in_IE7.jpg

       

      I've tried adding clear:both to the footer but it does no good. I've been tweaking the CSS but can't get it to behave correctly in IE. Anybody have a suggestion on how to fix it?

       

      Thanks,

      R-Co

        • 1. Re: Footer problems
          Ben M Adobe Community Professional

          If you want it to remain at the bottom of the viewable window at all times the position should be fixed, not absolute.  Then just make sure you have padding set to the bottom of your lowermost container to ensure that the last line in that container does not become hidden under your footer.

          • 2. Re: Footer problems
            R-Co Level 1

            Thanks for the fast reply. I changed the position to fixed and I have padding on the bottom of my #mainContent div above the footer, but now the footer overlaps the content above it when the window is resized. It's still indented in IE7, and in Firefox on Windows the footer sits over the content in the lower third of the page, not at the bottom. Is there something else in my CSS that's conflcting?

             

            http://www.colbydesign.com/redesign/home.html

             

            Thanks,

            R-Co

            • 3. Re: Footer problems
              hans-g. Adobe Community Professional & MVP

              Hi R-Co,

               

              my first slight lead is: look into your quellcode at line 78/83 and delete the double </div> via <!--     -->

               

              <!--</div>-->

               


              <!--</div>-->

               

              so your footer reachs the alignment from your text.

               

              Hans-G.

              • 4. Re: Footer problems
                Nancy OShea Adobe Community Professional & MVP

                Sometimes the best way to tackle a problem is to isolate it from everything else.

                Copy and paste this sticky footer into a new, blank document.

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title>Untitled Document</title>
                
                <style type="text/css">
                #footer {
                background: #241407 url(../images/BrownWallpaperRGB.jpg);
                border-top: 4px solid #b4b517;
                position: fixed;
                right:0;
                bottom:0;
                width:100%;
                }
                
                #footer p {
                width: 900px;
                margin: 0 auto;
                color: #FFF;
                font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
                font-size: .65em;
                line-height: 2;
                text-align:left;
                min-height: 40px;
                padding: 5px 0 0 60px;
                }
                
                #footer a {text-decoration: none;}
                #footer a:link {color: #fff}
                #footer a:hover,
                #footer a:active,
                #footer a:focus {color:#b4b517;}
                
                </style>
                </head>
                
                <body>
                <div id="footer">
                <p>
                <a href="#">Some link</a> | 
                <a href="#">Some link</a> | 
                <a href="#">Some link</a> | 
                <a href="#">Some link</a><br />
                This is a sticky footer
                </p>
                </div>
                
                </body>
                </html>
                
                

                 

                This fixed footer works in FF, Safari, Chrome,  IE 7, IE8.  But fixed footer divisions DO NOT work in  pre-IE7 or old Netscape browsers.  If you need to support older  browsers, you'll find solutions here:

                http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml

                 

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                http://alt-web.com/
                http://twitter.com/altweb
                http://alt-web.blogspot.com

                • 5. Re: Footer problems
                  R-Co Level 1

                  Thank you for the response, Nancy. That footer solved the problem in IE7, but in Firefox Windows it still sits in the lower third of the page overlapping the content. I think what I really need isn't a "sticky footer" because I don't want the footer to overlap the content above it if the page is long or the browser window is made smaller. I want the footer to be at the bottom of the page but below any content above it. So if the content on the page is minimal, the footer sits at the bottom. If the content is long and requires scrolling, the footer comes after the content and is revealed when you scroll to the bottom of the page. If the browser window is made smaller, the footer stays at the bottom of the page until it meets the content above it. Is that possible? Here's the updated page: http://www.colbydesign.com/redesign/home.html

                   

                  Rc

                  • 6. Re: Footer problems
                    Nancy OShea Adobe Community Professional & MVP

                    Using my example code from above, just remove the Position property from your Footer.

                     

                    from this:

                    #footer {
                    background: #241407 url(../images/BrownWallpaperRGB.jpg);
                    border-top: 4px solid #b4b517;
                    position: fixed;
                    right:0;
                    bottom:0;
                    width:100%;
                    }

                     

                    to this:

                    #footer {
                    background: #241407 url(../images/BrownWallpaperRGB.jpg);
                    border-top: 4px solid #b4b517;
                    width:100%;
                    }

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    http://alt-web.com/
                    http://twitter.com/altweb
                    http://alt-web.blogspot.com

                    1 person found this helpful
                    • 7. Re: Footer problems
                      R-Co Level 1

                      Thanks for your help!

                       

                      Rc