fmz 14

Hi,

I have a problem with footer positioning on a single page of a many-page site and it is only in IE7.

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>

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

I have tried adjusting the padding for IE7 as follows but it doesn't work:

body@secPage.contact #footer    { clear: left; padding: 63px 0 76px 0;  }

Any suggestions? I would appreciate some help.

Thanks.

1 answer

-1
points

I dont know if you noticed but in IE 8 the phone number and green contact us button are positiond some to the top. Also in IE7 On the contact pager, the header flows upward to, as the footer does, but the green contact button shows up as it should.

Are you using multiple style sheets for different browsers? If not, you should

<!--[if IE 8]>
    <link rel="stylesheet" href="css/ie8.css" />
<![endif]-->
<!--[if IE 7]>
    <link rel="stylesheet" href="css/ie7.css" />
<![endif]-->

Put this in the head section of your page, and style it accordingly. Sorry but i couldnt really find the problem in your HTML or CSS. Good Luck!

Answered almost 9 years ago by Menno Geelen