Overlapping Footer of Site

[John Klyne]

Hello there,


I was wondering if I may receive some help with this situation please?


My site is located at http://the-elites.org


It is an "elite" self-improvement membership organization (non-profit) that I am in the works of starting, I have everything on paper and such, but nothing online.

My footer on the site overlaps as well. If I can receive some help it would be greatly appreciated. I am even willing to give you access to content for free for the first 2 months, no obligation on your part afterwards.


I just need to get a move on this, and the footer makes things harder to work with and overlaps extremely.



The footer CSS is below, would anyone be able to point me in the right directions so I can fix the overlapping please? I have looked at other wordpress related posts trying to add and delete things in it but still unable to fix it.

/**********************************
    FOOTER CSS
***********************************/

#footer
{
    background-image:url(../img/backgrounds/Background_footer_BrownLeather.jpg);
    background-position: left top;
    min-height:185px;
    width:999px;
    margin:auto;
    margin-bottom: 20px;
    margin-top:10px;
    clear:both;
    position: relative;
    left:1px;
    padding-top:45px;
}

#footer .links-info-container
{
    padding:0px 40px 0px;
    width:920px;
    margin-bottom:40px;
}

#footer .links-info-container  a
{
    color:#777;
    font:11px/20px Verdana;
}

#footer .links-info-container a:hover
{
    color:#fff;
}

#footer .links-info-container .links
{
    width:139px;
    margin-right:24px;
    border-left:0px solid #111;
    padding:3px 0px 3px 10px;
    float:left;
    background-image:url(../img/common_files/Spliter_Footer.png);
    background-position: left 0px;
}

#footer .links-info-container .info
{
    width:213px;
    border-left:0px solid #222;
    padding:3px 0px 3px 10px;
    float:left;
    background-image:url(../img/common_files/Spliter_Footer.png);
    background-position: left 0px;
}

#footer .links-info-container .info p
{
    color: #aaa;
    margin: 0px;
    font:11px/16px Verdana;
    text-indent:0px;
}      

#footer-bottom
{
    padding:6px 40px 60px;
    width:920px;
    text-align:center;
    margin:auto;
    color:#666;
    font:10px Verdana;
    background-image:url(../img/common_files/Spliter_BlogPostTop_border.png);
    background-position: top;
}

#footer-bottom img
{
    border:none;
}

 

[essellar]

You have another stylesheet overriding that one. In the "JavaScript files" section of the page header, you have:

<link rel='stylesheet' id='wp-admin-css'  href='http://the-elites.org/wp-admin/css/wp-admin.css?ver=3.4.2' type='text/css' media='all' />

That stylesheet loads AFTER the stylesheet you've posted, and in CSS cascade rules, the last, most specific style set on an element wins. Unfortunately, that stylesheet is setting these values for #footer:

#footer {
   position:absolute;
   bottom:0;
   left:0;
   right:0;
   padding:10px 0;
   margin-right:20px;
   border-top-width:1px;
   border-top-style:solid;
}

There are a few other settings applied to #footer as well, but they wouldn't affect the display position directly. (That stylesheet is minified -- all of the white space, including line breaks, is removed -- so it isn't easy to spot the problem.) Just removing the position: absolute; from that stylesheet in Chrome's debugger sends the footer straight to the bottom of the page as expected. I don't know if any of the other settings are doing any harm -- they don't appear to in Chrome, but I don't have the facilities to test across browsers with the modified stylesheet. There's a potential for problems in older versions of IE, but I wouldn't worry about it: IE6 & 7 users are used to the web being broken for them.

 

[John Klyne]

Eseller, you are BY FAR...the best!

Removing the position: absolute; helped soooo much that it fixed the problem haha..

I greatly appreciate your help. You saw the site...offering self-improvement and such...memorization skills classes, and other things...its not done as you can tell, but send me a quick PM and I'll create yourself an "Unlimited" account. Meaning all access...I charge $ 500.00 a month per student in real life to teach the memorization skills... offering through the site you helped me on is going to be cheaper and easier...and I'll give you access free, for as long as the organization exists. 1 condition...what you learn stays within the organization.

Time to google around how to center the footer.

Thanks on the help, pm me if you're interested for when the Org. is open to the public, I'll give you access.