fmz 14

The footer content on a single page has gone rogue and moved down about 30px from its proper place.

Here is the page: http://www.theideapeople.com/contact_us.html

I tried applying a -30px override on the margin but it didn't work.

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:ideas@theideapeople.com">ideas@theideapeople.com</a>
    </div>

    <br class="clear"/> 
</div>
</div>

And here is the CSS:

.width          { position: relative; margin: 0 auto; width: 960px; }

Here is the attempted IE7 override css:

body#secPage.contact #footer div.width      { margin: -30px auto 0 auto; }

Help is always appreciated.

Thanks.

1 answer

Kau-Boy 110
1
point
This was chosen as the best answer

Add a "position: relative" to #footer and a "position: absolute" to #width and you should be fine.

Answered over 8 years ago by Kau-Boy
  • Just one problem. The content has to float with the sizing of the page. margin: 0 auto fmz over 8 years ago
  • Will it help if you surround it with an additional DIV for are using the "margin: 0" auto on? I think you'll need an absoluted positioned element for that in IE. Kau-Boy over 8 years ago
  • Making the .width relative solved the problem. Thanks. fmz over 8 years ago