Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

My Footer is at the top!

  1. derivadow
    Member

    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. steve2400
    Member

    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. derivadow
    Member

    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. mymyspacelayouts
    Member

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

  5. raincoaster
    Member

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

  6. derivadow
    Member

    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. niyse
    Member

    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. cjwriter
    Member

    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. cjwriter
    Member

    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. derivadow
    Member

    cjwriter - float:center worked, many thanks :)

  11. derivadow
    Member

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

  12. cjwriter
    Member

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

  13. derivadow
    Member

    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. cjwriter
    Member

    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. derivadow
    Member

    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. devblog
    Member

    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. derivadow
    Member

    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. atthe404
    Member

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

  19. derivadow
    Member

    atthe404 - brilliant! Thank you.

    And thanks to all.

    Tom

  20. atthe404
    Member

    brilliant? I like that. Thanks :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags