Support » Themes and Templates » Broken Footer

  • Resolved kyle212

    (@kyle212)


    I do occasional maintenance on a company blog set up by a former employee. Earlier today, I removed a small text widget in the Sidebar–>Bottom Left section. It didn’t seem to be anything important – just a small, out-of-date advertisement.

    However, when I removed the text widget it somehow broke the footer of my page, and now it appears somewhere in the middle no matter what I do. I put back the text widget at the same size, but the footer remains in the middle of the page.

    The page is here: http://beagreenirene.com. Anyone have any ideas as to what I could have done?

Viewing 7 replies - 1 through 7 (of 7 total)
  • If it is meant to be beneath the footer text (“Our Green Friends,” “Navigation,” etc) do the following:

    Add “clear:both;” to the CSS definition for #footerbg

    That should fix any problems you’re having. If that’s not the behavior you want, let me know here.

    You’re also going to want to remove the “height:2000px;” line from the definition for #wrap or the white background for the posts will extend below the footer.

    Thread Starter kyle212

    (@kyle212)

    That worked great! – for Safari and Firefox. But IE still shows the footer floating in the middle. Do I need to add some more code for IE?

    Thanks so much for the help. I know just enough about CSS to recognize what I’m looking at; not quite enough to troubleshoot these kinds of problems.

    It works in IE8 … the problem in IE7 might be your positioning. That’s just my first guess, though. The CSS fix was a quick patch, but you should really go back through your design and try to fix the markup issues preventing it from validating: Click here to go to validator.w3c.org

    Once you fix these, it might be an easier bug to track down.

    Thread Starter kyle212

    (@kyle212)

    Thanks for the pointers – after a lot of futzing around with the positioning, I managed to get it looking back to normal.

    Kyle,

    What exactly did you do to fix the positioning (if people browse the forums in the future looking for the same solution)?

    Thread Starter kyle212

    (@kyle212)

    I’m not sure I quite know the terminology, but I can certainly try.

    Basically I went through and methodically figured out and cleaned up the various <div> sections and how they were positioned relative to one another. So, as it turned out, the #footer div was being positioned relative to the #wrapper div and not the #main div, which meant that when the #wrapper div ended, the footer appeared directly beneath it – in this case, about halfway down the page.

    All this cleaning fixed my problem, but unfortunately I’m still not quite sure what caused it in the first place – why removing a sidebar widget had such a profound effect on the CSS; why the page was set up in such a strange manner in the first place, and how it managed to display so normally for the last few months; and why, even if it was so confused, it managed to display correctly in FF or Safari. If anyone has the answers to those questions I’d be very curious to know what exactly it was that I fixed.

    Reading through this I’m not sure it’ll help anyone, but I hope that it does!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Broken Footer’ is closed to new replies.