Need help? Check out our Support site, then


My Footer is at the top!

  1. I've monkeyed around a bit with the 'unsleepable' theme (http://derivadow.com) and although I'm more or less happy I've a couple of bugs I can't resolve - any pointers gratefully received :)

    So I've two bugs:

    1. The footer when viewing a post or a page (e.g. http://derivadow.com/2007/09/11/wabi-sabi-design-to-age/) moves to the top of the page - originally it obscured the nav bar but I set the overflow so that at least the site works even if the footer is in the wrong place and its a bit ugly.

    2. I've also set a background image on the read more link (should be a little arrow to the left of the text) - this use to work but now it doesn't and I now can't get it back... tried adjusting padding etc. but no joy :(

    Thanks
    Tom

  2. Did you set the "clear:both" in the css for your footer? Using overflow is unnecessary in any situation from what I hear. Also use a clearing div (which is blank) and use the same CSS attribute, that should work.

  3. Thanks Steve - the clear:both doesn't appear to work (I've tried setting it on both the header and the footer). I might not be using the clearing div properly - but that doesn't seen to work either :(

    The overflow is really just a work around - the footer is floating top right which is ugly but at least the page is visible without it the footer can cover the entire page (depending on the window width)!

  4. From what I'm seeing, your page looks the way it should.

  5. I agree: either you fixed it or the error doesn't show up on my Firefox. Nice-looking blog, very clean!

  6. May be its just a problem with Mac + Firefox... but its still a bug! Have a look at http://derivadow.com/2007/09/11/wabi-sabi-design-to-age/ and scroll to the right... the footer is top right.

  7. True. I viewed it with Firefox ver 2.0.0.6 (on a PC) and I see your error with the footer.

    I have no idea what to do about it, though, just wanted to let you know that you're not the only one seeing the error.

    - Biyang Hansen

  8. I see it in Firefox and IE. It's fine on the front page, but click on an individual post (or page) and the footer goes to the top.

    In your #page css, you've got float: left. Change it to float: center. I think that should put the footer back at the bottom.

    I'm not sure about the read more link... I'll have to have a closer look, unless someone beats me to it. :)

  9. Okay, I think I've found the read more link problem. It's the #more-link css. You need to remove the hyphen between the words. It should be morelink. That should bring the arrow back.

  10. cjwriter - float:center worked, many thanks :)

  11. cjwriter - again many thanks for your time and help. The more-link / morelink was the problem... all working as it should :) Thank you.

  12. No worries; I'm still learning with css as well, so it's trial and error. Happy blogging. :)

  13. Ah just realized - changing the float to center, centers the page(!) Is there are way to have the page left aligned without mucking up the footer?

  14. I think it's possible, but unfortunately it's outside of my skills, or I can't get it to work with Unsleepable anyway. Devblog or atthe404 might be able to help you when they see it.

  15. OK, and thanks for looking into it for me (and at least it makes me feel less stupid that I couldn't debug it myself).

  16. Guys, there's no "center" value for the "float" property. Though it works, its use is incorrect. The values for the float property are: left, right, none and inherit

    derivadow,

    What changes did you make to the CSS? Don't post the whole CSS code here. Just list the selectors you changed just for reference.

    What is it that you are trying to accomplish? I mean, was the page originally aligned to the left or you want it to look like that?

  17. devblog, here's the relevant snip of css:

    #page {
    background:#fff;
    background-position:right !important;
    text-align:left;
    position:relative;
    width:775px;
    float:center;
    border-left:20px solid white;
    margin:0 auto;
    padding:0;
    }

    I changed it to float:left - but this caused the problems with the footer... I've changed it back to float:center and the footer is at the bottom of the page where it should be.

    But I don't really what the page centered. I would like to have it aligned to the left with a white 20px left margin.

    Thank you for your time :)

  18. The #page need not be floated at all.
    To set it as described would require:
    margin: 0px auto; to be deleted

  19. atthe404 - brilliant! Thank you.

    And thanks to all.

    Tom

  20. brilliant? I like that. Thanks :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags