WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS footer help! (17 posts)

  1. feedme
    Member
    Posted 7 years ago #

    I enabled widgets on a non widget supported theme,
    and took out the comments from being displayed in "Pages"
    (how I did that, I have no clue)... obviously I am a coding dummy.

    Everything is working fine (function wise) but I just can't figure out how to fix the footer CSS.

    this is my blog
    http://feedme-imhungry.com/?page_id=2

    and this is the CSS

    #credit {
    margin: 4px;
    padding: 4px;
    font-size: 11px;
    color:#999999;
    text-align: center;
    clear: both;
    background-color: #EFEFEF;

    }

    #credit a:link, .credit a:hover {
    color:#999999;
    }

    #page-footer {
    height: 15px;
    margin-bottom: 0px;
    float: left;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    position: relative;
    }

    I changed the margin-bottom to 0px and postion to relative... but what I'm trying to achieve is for the footer to stay at the very bottom regardless of how long of short the content is....

    Will someone be able to help me out?
    Please....? Anyone?... anyone? bueller? bueller?

  2. Doodlebee
    Member
    Posted 7 years ago #

    in #content, remove "overflow:auto".

    change "float:left" in the page_footer to "clear:both".

  3. yosemite
    Member
    Posted 7 years ago #

    You could start by removing overflow: auto; from #content.

    Then fix the bad code (validate).

  4. yosemite
    Member
    Posted 7 years ago #

    Yeah, like she said. Yeah.

  5. feedme
    Member
    Posted 7 years ago #

    hi doodlebee! thanks for your help... but it didn't work =(

  6. Doodlebee
    Member
    Posted 7 years ago #

    That's odd, because I tried it, and it worked fine for me.

  7. feedme
    Member
    Posted 7 years ago #

    hey yosemite... thanks for your reply

    the weird thing is the footer positions are different in IE and Firefox.
    in IE, everything fits and the credit is just hanging out right under my post
    and in Firefox, the lists in the sidebars are spilling out...

  8. Doodlebee
    Member
    Posted 7 years ago #

    Okay, I just went and rechecked - you need the semi colon.

    It's not "clear:both"...it's "clear:both;"

    Sorry I wasn't particular, I figured you'd kinda know that since everything else has it.

    And you still haven't removed the "overflow:auto" forn the #content. That's a biggie there.

  9. feedme
    Member
    Posted 7 years ago #

    Hi doodlebee, thank you for dealing with such a novice. I thought I followed your instructions but I guess I didn't... thx for your help doodlebee.

    But now the credit portion is positioned left in Firefox and it's still kinda hanging out in the middle of the page in IE. Does it look like that to you?

  10. Doodlebee
    Member
    Posted 7 years ago #

    yes - and that's odd. DId you try changing the footer to like so:

    <div id="page-footer">
    <div id="credit">
    stuff here
    </div>
    </div>

    ?

    Right now, your credit div is outside of the footer div. It's aligned in the centher in IE becase you have your body set to text-align:center (that works for centering things in IE), but right now the credit div doesn't have anything to align itself *to*. You might try placing it within the footer div and see if that works.

  11. feedme
    Member
    Posted 7 years ago #

    I think the template was made to display the comments on every entry and since I took out the comments, it imbalanced the CSS. When I took out the "overflow: auto;" from content, it bunched up the text from the posts under the leftside bar to the very left side of the screen, so I put it back.

    I also tried sticking #page-footer div in the footer, closed the div, and put the php under the div but it only bolded the text in both IE and Firefox.

  12. Doodlebee
    Member
    Posted 7 years ago #

    Well, I was watching you work ;)

    You did put the page-fotter div around the credit div - however you neglegted to remove the inital page-fotter div. So it looked like this:

    <div id="page-footer"></div>

    <div id="page-footer">
    <div id="credit">
    stuff here
    </div>
    </div>

    So, in essence, you were putting your "page-footer" div in twice, which would mess things up, and that's why the bottom was popping up to the center of the "credit" div.

    as for the bold text, that's easy enough to fix.

    But you should try to put the code in properly. Also have you validated your page? Chances are, your chasing your tail if you haven't validated yet.

  13. feedme
    Member
    Posted 7 years ago #

    Well, I went and validated my CSS at W3C and now feel like crying LOL
    Maybe I should fix all the kinks before trying to work on the footer...

  14. feedme
    Member
    Posted 7 years ago #

    Oh! I forgot to tell you waht happened when I properly inserted teh footer.
    It was the same in IE, but in Firefox, it turned into a small frame!
    There were scrollbars on the right side and the bottom. Weird!

  15. feedme
    Member
    Posted 7 years ago #

    ok, so now my CSS is validated (it was only formatting stuff... like text can't be none) I ignored the WP calendar and comments. (I googled it and it said it wasn't a W3 syntax)

    Is there anyone else kind enough to help me with the footer?

  16. Doodlebee
    Member
    Posted 7 years ago #

    What about your HTML? I'm showing 5 validation errors.

    1) you're using 2 div id=page_footer's.
    2) your line breaks are incorrectly formatted: <br> is supposed to be <br />
    3) You didn't close one of your cite tags.
    4) You didn't close TWO of your div tags (there's a BIG one that could *really* be contributing to your problems)

    I'd start with fixing those.

  17. feedme
    Member
    Posted 7 years ago #

    got it to work!

    thanks doodlebee! you rock!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags