Mis-Aligned Footer Fix – WordPress Default 1.5

  • Octa

    (@octa)


    18 years, 2 months ago

    I noticed that the default WordPress theme has a display issue in Firefox that causes the footer to be mis-aligned by a few pixels. It’s not a huge deal, but for those out there that would like a fix for this, the solution is fairly simple.

    Open: wordpress_directory/wp-content/themes/default/header.php

    Goto: Line 27

    Replace:
    #footer { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickfooter.jpg”) no-repeat bottom; border: none;}

    With:
    #footer { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickfooter.jpg”) no-repeat bottom left; border: none; }
    #footer { /margin-left: 2px; }

    This fixes the display issue in both Firefox and Internet Explorer.

Viewing 15 replies - 1 through 15 (of 19 total)
1 2
  • spencerp

    (@spencerp)

    18 years, 2 months ago

    Hmm, I just checked your site with FF and it’s still showing like that. But it’s fine in IE. <goes to see what ya did to keep that 20px gap in below footer though for IE>…LOL!

    Check this:
    http://wordpress.org/support/topic/58105?replies=15#post-315021

    Maybe we could get something worked out together here and get this all taken care of lol..

    spencerp

    Thread Starter Octa

    (@octa)

    18 years, 2 months ago

    Ya, I can’t edit it the required file on the http://octa.wordpress.com/ site, but I have it fixed on my http://localhost/. Try editting that file like I said, it works fine in both browsers.

    EDIT: Give me a few minutes to setup a DynDNS address to my PC and I’ll show a working example.

    spencerp

    (@spencerp)

    18 years, 2 months ago

    Ok, I had tried that once, but it shifted mine to the right in IE, but I’ll wait for you to get your stuff setup. But, if and when I add a 20px for margin-bottom it looks just fine in FF, but in IE it’s showing as if it’s a transparent image… =(

    I’m going to keep at this biotch though lol!

    http://www.vindictivebastard.net/test101/

    spencerp

    P.S. I haven’t changed my codes back to a “fresh” copy though while trying your codings…So maybe I’ll try that now.. Slaps self after seeing that url again for wordpress.com… *SLAP*

    Thread Starter Octa

    (@octa)

    18 years, 2 months ago

    Here’s the URL: http://octa.blogdns.com/

    It’s only temporary, so I’ll probably bring it back down in a day or so. Everything works fine in both Firefox 1.5 and IE 6.0. I can’t attest to older versions, but it works fine in those.

    EDIT: If you’ve made any alterations to the style or code besides the ones I posted, you might want to try reverting back to the original before using this code.

    spencerp

    (@spencerp)

    18 years, 2 months ago

    Ok, yeah that does work. =) I just put everything back to the original state, file wise and then did your fix. It’s working good! =) ALOT EASIER then all that other stuff we had done lol! =)

    But as for your linky, it timed out for me in FF. =( But it’s ok though, your fix is working in my Test101 blog..

    However, in my IE6, that footer 20px margin or whatever goes bye bye.. =( But it’s fine in FF, I’m not sure what’s going on there…mmm. I’ll take a screen shot once and show ya..

    Please note: That in the screen shot, the bg image isn’t lining up, and that’s because I cropped the upper part of the image and brought it down closer to the footer, so “ppl” can see it’s using IE as the browser and to kinda show off my new Windows theme. LUNA ELEMENT 4 lol.
    http://www.flexbeta.net/forums/index.php?automodule=blog&blogid=23&showentry=60
    http://www.vindictivebastard.net/images2/margingoneIE.gif

    spencerp

    Thanks again for that quick and easy fix. =)

    Thread Starter Octa

    (@octa)

    18 years, 2 months ago

    Ack, I just noticed that this throws off the header slightly in IE. To fix this:

    Open: wordpress_directory/wp-content/themes/default/header.php

    Goto:
    Line 33

    Replace:
    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }

    With:
    #header { margin: 0 !important; margin: 0 0 0 2px; padding: 1px; height: 198px; width: 758px; }

    And on the note of the bottom margin, give me a few minutes and I’ll come up with a fix for you.

    spencerp

    (@spencerp)

    18 years, 2 months ago

    *EDITED* That worked like a charm! =)

    Hahaha, ok cool thanks! =) <goes to edit again>…

    spencerp

    And to think, this wasn’t even my problem to begin with lmaO! I’m working on my Andreas08 theme. Hahaha.

    Thread Starter Octa

    (@octa)

    18 years, 2 months ago

    Ok, to add that bottom margin:

    Open:
    wordpress_directory/wp-content/themes/default/footer.php

    Goto:
    Line 13

    Add:
    <div style=”height: 20px;”></div>

    You can change the 20px to whatever, but this will give you the bottom margin you’re looking for.

    On a side note, thanks for the link to Luna Elements 4. I’m currently using XPM Classic which is a nice theme, but had been looking for a place to get Luna Elements.

    spencerp

    (@spencerp)

    18 years, 2 months ago

    Ok, that worked there, but for some reason it’s stuck on it in IE6 and I can’t get it a little lower then 20px lmao! Or whatever it is..Mmm… Even did a cache delete.. mmm.

    But that does work! Thanks again man! =) And no problem for that link to that Luna theme.. =)

    spencerp

    Thread Starter Octa

    (@octa)

    18 years, 2 months ago

    Hmmm, I think that’s because of the way IE renders <div> tags, I hadn’t really thought about that as I generally use Firefox. Let me see if I can find a better solution.

    EDIT: Ok, this should be a better fix. Make sure to remove the <div> tag before making the following change:

    Open:
    wordpress_directory/wp-content/themes/default/style.css

    Goto:
    Line 211

    Replace:
    margin: 0;

    With:
    margin: 0 0 20px 0;

    You can change the 20px to whatever, and you shouldn’t have the same problems as you did with the <div>.

    spencerp

    (@spencerp)

    18 years, 2 months ago

    *EDITED* Your fix works as well as mine lol! =)

    Ok, I got it looking the same now! WOOT WOOT!! Hopefully it looks the same for you.

    I just changed it to:

    <div style="height: -20px;"></div>

    spencerp

    But I can try your fix as well..let me see once lol! This is TOO FUN and I’m not even drinking hahaha…

    spencerp

    (@spencerp)

    18 years, 2 months ago

    *Edited, and even the stupid ass search area is screwy in IE and not in FF!! LOL!!

    Now the other problem is yet, them little “images” or whatever they are, in the sidebar by the links…they showing up in FF but not in IE, is there away to have them display?

    Man, all this work is fun, before too long here, were going to have a perfect Default Kubrick theme lmao!

    spencerp

    Thread Starter Octa

    (@octa)

    18 years, 2 months ago

    Heh, coding has that effect on me as well. Glad I could help. ^_^

    EDIT: I hadn’t noticed that, gimme a sec and I’ll see what I can do.

    Thread Starter Octa

    (@octa)

    18 years, 2 months ago

    Ok, to fix the Search area:

    Open:
    wordpress_directory/wp-content/themes/default/style.css

    Goto:
    Line 456

    Replace:
    width: 115px;

    With:
    width: 108px;

    As for the sidebar links, I’m still working on it. I’m having trouble locating exactly where the » is in the code.

    spencerp

    (@spencerp)

    18 years, 2 months ago

    Hahaha, once ya again you did it lmao! =) By the way, I’m adding all this into the Test blog as a post for reference purposes.

    http://www.vindictivebastard.net/test101/

    =)

    spencerp

    As for those little >> things, I think it was listed in the style.css file or something I think, for the ul,li’s and stuff. But, maybe there just isn’t away to fix them fluckers lol!

    spencerp

Viewing 15 replies - 1 through 15 (of 19 total)
1 2
  • The topic ‘Mis-Aligned Footer Fix – WordPress Default 1.5’ is closed to new replies.