Footer content positioning problem with WooFoo Contact Form and IE7

Question

I am working with a to client fix a problem on a single page. On all pages, the footer content is positioned and displays properly. However, on this page, when viewed in IE7 the footer content moves up into the body area. The only difference between this page and all the other is the presence of a WooFoo contact form.

I have tried a zillion different ways to bump that content down, but it will not respond to padding or margin adjustments.

Here is the HTML:

<div id="footer">
<div class="width">
<ul class="footerNav">
  <li><a class="bFB" href="http://www.facebook.com/pages/Charlotte-NC/The-Idea-People/124178504825" target="_blank" title="The Idea People Charlotte web design facebook">FaceBook</a></li>
  <li><a class="bTW" href="http://twitter.com/theideapeople" target="_blank" title="The Idea People Charlotte web design twitter">Twitter</a></li>
  <li><a class="bEM" href="http://feedburner.google.com/fb/a/mailverify?uri=theideapeople" target="_blank" title="The Idea People Charlotte web design email">FeedBurner</a></li>
  <li><a class="bRSS" href="http://feeds.feedburner.com/theideapeople" target="_blank" title="The Idea People Charlotte web design rss">RSS</a></li>
</ul>
<br class="clear" />
<ul class="termNav">
  <li><a href="terms.html">Terms of Use</a> |</li>
  <li><a href="privacy_policy.html">Privacy Policy</a></li>
</ul>
<p class="copyright">&copy;2010 The Idea People. All Rights Reserved.</p>
<p class="company">Charlotte, NC web design, graphic design and internet marketing</p>
<div id="address"> <strong>The Idea People</strong><br />
  4424 Taggart Creek Rd., Suite 111<br />
  Charlotte, NC 28208 </div>
<div id="phone"> <strong>T</strong> 704.398.4437<br />
  <strong>F</strong> 704.398.4438<br />
  <strong>E</strong> <a href="mailto:[email protected]">[email protected]</a> </div>
<br class="clear"/>
</div>
</div>

Here is the CSS:

#footer      { clear: both; background: url(../images/bg_footer.png) 0 0 no-repeat; padding: 10px 0 76px; color: #ccc; font-size: 14px; font-weight: bold;  }
#footer .width { position: relative; margin: 0 auto; width: 960px; }                                                
.footerNav { width: 300px; height: 30px; font-size: 15px; position: relative; top: 5px; left: 770px; }
.footerNav li   { position:relative; float:left; margin:0; }
.footerNav li a  { color: #fff; display: block; text-decoration: none; font-weight: bold; text-indent: -9999px; }

.footerNav li a.bRSS { background: url(../images/icon-rss.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bFB   { background: url(../images/icon-facebook.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bTW  { background: url(../images/icon-twitter.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bEM  { background: url(../images/icon-email.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }

Any help in resolving this will be greatly appreciated!

Thanks.

Answer 1

The .footerNav element is causing overflow and busting the layout. I even get horizontal scrollbars on my machine, on all browsers.

The following CSS seems to fix it:

.footerNav 
{
    /* Add clear and float
    */
    clear:      left;
    float:      right;
    font-size:  15px;
    height:     30px;
    top:        5px;
    /* Delete these 3
    position:   relative;
    left:       770px;
    width:      300px;
    */
}