WordPress.org

Support

Support » Themes and Templates » [Resolved] CSS footer help!

[Resolved] CSS footer help!

  • 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?

Viewing 15 replies - 1 through 15 (of 16 total)
  • Doodlebee
    Member

    @doodlebee

    in #content, remove “overflow:auto”.

    change “float:left” in the page_footer to “clear:both”.

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

    Then fix the bad code (validate).

    Yeah, like she said. Yeah.

    hi doodlebee! thanks for your help… but it didn’t work =(

    Doodlebee
    Member

    @doodlebee

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

    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…

    Doodlebee
    Member

    @doodlebee

    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.

    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?

    Doodlebee
    Member

    @doodlebee

    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.

    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.

    Doodlebee
    Member

    @doodlebee

    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.

    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…

    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!

    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?

    Doodlebee
    Member

    @doodlebee

    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.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘[Resolved] CSS footer help!’ is closed to new replies.