SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clearfooter issue

    sometimes the footer shows up in the middle of the page. I can't replicate it, but a lot of other people see it. I don't know what the problem is?

    http://www.skotolsen.com/

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you get rid of the absolute positioning on the footer, and get rid of the #clearfooter div and apply the clear:both to the #footer, then it should sit properly.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to change the footer to this technique instead (read the faq on putting a footer at the bottom).

    Code:
    #footer {
        height:45px;
        width:770px;
        margin:auto;
        padding-bottom:10px;
        text-align: center;
        clear: left;
        margin-top:-55px;
        position:relative;
    }
    
    #clearfooter { /*needed to make room for footer*/
        clear:both;
        height:55px;
    }
    #footer form{margin:0;}
    then move the footer outside of the main wrapper like so:

    Code:
                <img src="/images/skot_signature.png" border="0" alt="Skot Olsen" /> </div>
        </div>
        <div id="clearfooter"></div>
     </div><!-- closing div of #wrapper -->
    <div id="footer">
        <form action="/events/subscribe.php" method="post">
            <table align="center">
                <tr>
                    <td>subscribe: </td>
                    <td><input name="email" type="text" style="width:100px; height:15px; padding-right:5px" title="enter your email address to receive my Events newsletter" /></td>
                    <td><input name="submit" type="submit" value="go" title="enter your email address to receive my Events newsletter" /></td>
                </tr>
            </table>
        </form>
        <div class="footertxt">&copy;1997-2007 skot olsen | <a href="/credits.php">credits</a></div>
    </div>
    </body>
    </html>
    Quote Originally Posted by centauri
    If you get rid of the absolute positioning on the footer, and get rid of the #clearfooter div and apply the clear:both to the #footer, then it should sit properly.
    I think you missed the fact that it was a sticky footer

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I think you missed the fact that it was a sticky footer
    I think I did - no mention was made of that.....

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I think I did - no mention was made of that.....
    You have to be psychic

  6. #6
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've read your tutorials, but this just makes my head explode. I finally thought I had it right... Arggh.

    Thanks for your help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •