Проблема позиционирования содержимого нижнего колонтитула с WooFoo Contact Form и IE7

Question

Я работаю с клиентом, чтобы решить проблему на одной странице.На всех страницах содержимое нижнего колонтитула располагается и отображается правильно.Однако на этой странице при просмотре в IE7 содержимое нижнего колонтитула перемещается вверх в область тела.Единственная разница между этой страницей и всеми остальными - это наличие контактной формы WooFoo.

Я пробовал миллионы различных способов урезать этот контент, но он не будет реагировать на отступы или корректировки полей.

Вот 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:ideas@theideapeople.com">ideas@theideapeople.com</a> </div>
<br class="clear"/>
</div>
</div>

Вот 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; }

Любая помощь в решении этой проблемы будет принята с благодарностью!

Спасибо.

Answer 1

Элемент .footerNav вызывает переполнение и разрушает макет. У меня даже есть горизонтальные полосы прокрутки на моем компьютере во всех браузерах.

Следующий CSS, кажется, исправляет это:

.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;
    */
}