WordPress.org

Ready to get started?Download WordPress

Forums

Mis-Aligned Footer Fix - WordPress Default 1.5 (20 posts)

  1. Octa
    Member
    Posted 8 years 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.

  2. spencerp
    Member
    Posted 8 years 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

  3. Octa
    Member
    Posted 8 years 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.

  4. spencerp
    Member
    Posted 8 years 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*

  5. Octa
    Member
    Posted 8 years 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.

  6. spencerp
    Member
    Posted 8 years 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. =)

  7. Octa
    Member
    Posted 8 years 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.

  8. spencerp
    Member
    Posted 8 years 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.

  9. Octa
    Member
    Posted 8 years 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.

  10. spencerp
    Member
    Posted 8 years 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

  11. Octa
    Member
    Posted 8 years 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>.

  12. spencerp
    Member
    Posted 8 years 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...

  13. spencerp
    Member
    Posted 8 years 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

  14. Octa
    Member
    Posted 8 years 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.

  15. Octa
    Member
    Posted 8 years 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.

  16. spencerp
    Member
    Posted 8 years 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

  17. Octa
    Member
    Posted 8 years ago #

    Update:
    I've found the problem, I'm working on a solution. However based on what I'm seeing the solution may be to remove the » from the links altogether. Trying to find a better solution.

    EDIT:
    Ok, I've somewhat found a solution, however to make the » before links work in both Firefox and IE extensive editting is required, more than could be easily documented. Therefore, as far as I can tell, the simplest method for browser compatibility is to remove the » so that it doesn't display in either browser:

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

    Goto:
    Line 393

    Replace:
    entry ul li:before, #sidebar ul ul li:before {
    content: "0BB 020";
    }

    With:
    /*.entry ul li:before, #sidebar ul ul li:before {
    content: "0BB 020";
    }*/

    Of course, this is only if you are really concerned about the equal appearances in both browsers. Otherwise you can just leave it as is, and viewers in IE will never know the difference.

  18. spencerp
    Member
    Posted 8 years ago #

    Hahaha..you're just as into fixing shit as I am lmao! I think tonight is going to be a DRINK BEER night haha.. =)

    By the way, when you get the chance, can you view this and check everything for errors or not? It's the Andreas08 theme, revamped by me. I have been trying to get all the quirks and shit fixed file wise as well as display wise in IE and FF.

    Also, when I had done a reformat of the harddrive the other day, reinstalled Windows 98SE, I had checked it with IE5 and the top nav was scrunched together or misplaced...looked like hell!

    But once I did the XP upgrade over Win 98SE and had the IE6 and FF 1.5 viewing it...it was fine again.. :/ Thanks for checking it or any comments man. =)

    http://www.vindictivebastard.net/blog3/

    spencerp

    Also, I had copied all the existing files into another new renamed folder and uploaded it to a new location on the domain, installed it and it installed like a charm. Only got two validation errors, being that I didn't have that Archives plugin installed on it.

    I removed that block from the sidebar.php file and it validated..Also had an error because of the < a href for the link at header description. But fixed that..other then that...it went sweetly.. =)

    Basically ready for a theme release! But, I'm thinking about not doing it right away...

  19. Octa
    Member
    Posted 8 years ago #

    I can't see any problems with that theme. At least nothing noticable, if there are any problems with it they aren't immediately aparent. Anyways, I've editted my previous post with the "fix" for the » issue. Unfortunately the solution to make it display in both browsers is quite a bit more complex than I was expecting, so for the sake of brevity I suggest simply removing it altogether if you want it to look the same in both.

  20. spencerp
    Member
    Posted 8 years ago #

    It's ok Octa, maybe just leaving that alone would be the best thing, no need to do extensive editing on it anyway.. =)

    As for my theme, I plan on changing it all up here soon for on my main blog, on another test site I got.. and then "MAYBE" release the Blog3 theme one "as is".

    Being that if I go away for 3 months, I won't be around to give support for it. Someone else will have to, maybe Kate (Katie1) or someone could..

    I know the contact input fields need changed yet and the date is up a little higher then the post title but fluck that...that's nothing, stupid shit..but off to work on it again lol..

    spencerp

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.