My Footer is at the top!

  • Author
    Posts
  • #145893

    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

    #146108

    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.

    #146139

    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)!

    #146189

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

    #146194

    raincoaster
    Member

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

    #146258

    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.

    #146279

    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

    #146282

    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. :)

    #146295

    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.

    #146298

    derivadow
    Member

    cjwriter – float:center worked, many thanks :)

    #146301

    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.

    #146302

    cjwriter
    Member

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

    #146303

    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?

    #146326

    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.

    #146331

    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).

    #146390

    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?

    #146395

    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 :)

    #146411

    atthe404
    Member

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

    #146456

    derivadow
    Member

    atthe404 – brilliant! Thank you.

    And thanks to all.

    Tom

    #146485

    atthe404
    Member

    brilliant? I like that. Thanks :)

The topic ‘My Footer is at the top!’ is closed to new replies.