Footer floating over body

  • I am having an issue with the footer of a website I am working on.

    The footer seems to be floating over the body of the website. Take a look here: https://sbbl.helixhouse.co/

    After locating the css file I found the code looking like this:

    #footer {position: relative;width: 996px;height: 29px;margin: 0 auto 27px auto;clear: both;}#footer ul {width: 660px;height: 29px;display: block;background: #221E1F;float: right;}#footer ul li {position:relative;list-style: none;display: inline;height: 29px;padding: 0 4px;}#footer ul li a {float:left;color: #CCC;padding: 6px 12px 0 12px;height: 23px;display: block;text-decoration: none;font-weight: bold;font-size: 10px;text-transform: uppercase;}#footer ul li a:hover

    If I change the position from position: relative to position: absolute;, bottom 0px; would this fix my issue?

    Thanks for any info!

Viewing 3 replies - 1 through 3 (of 3 total)

  • You can test the CSS changes by inspecting the page in Firefox or Chrome. Just right click on the footer, click inspect element, find the #footer selector and add your rules. If they work you can add them to your theme’s style.css.

    Thread Starter iangdesign

    (@iangdesign)

    That is a great idea…I will give it a go. Thanks!

    Thread Starter iangdesign

    (@iangdesign)

    I am testing with Firebug and adding the above code into the css and it pushes the footer to the middle of the page, over the content.

    This is what the css looks like for the footer selector:

    #footer {
    background: none repeat scroll 0% 0% #00B295;
    color: #7B7B7B;
    font-size: 13px;
    z-index: 100;
    clear: both;
    padding: 10px 0px;
    position: absolute;
    bottom: 0;
    }

    I have tried a few other rules, but this is the only thing that is changing the footer at all. Any ideas on how to proceed?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Footer floating over body’ is closed to new replies.