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