fmz 14

I am working on a very odd page. This page works fine in every browser except IE7. In IE7 when you mouse over the Email Us Now! link at the bottom of the page, the entire block of footer text drops about 20-30 pixels.

The content was problematic to begin with and required some in-page coding to get it to position correctly at all.

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="http://www.theideapeople.com/terms.html" title="The Idea People Charlotte internet marketing terms">Terms of Use</a> | </li>
<li><a href="http://www.theideapeople.com/privacy_policy.html" title="The Idea People Charlotte search engine optimization privacy">Privacy Policy</a> |</li>
<li><a href="http://www.theideapeople.com/resources.html" title="The Idea People Charlotte search engine optimization privacy">Resources</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> <script type='text/javascript'>
<!--
var tg='<';
var name='ideas';
var at='&#x040;';
var host1='theideapeopl';
var host2='e.com';
var text='Email Us Now!';
document.write(tg+'a hr'+'ef=mai'+'lto:'+name);
document.write(at+host1+host2+'>'+text+tg+'/a>');
-->
</script>

</div>

Here is the css:

    #footer      { 
        clear: both; 
        background: #636363 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; }   

Here is the page-specific css for IE7:

ul.footerNav    { padding-top: 15px; }
        ul.termNav  { padding-top: 15px; }
        p.copyright     { padding-top: 15px; }
        p.company   { padding-top: 15px; }

Any help in resolving this will be most greatly appreciated!

Thanks!

  • Well it only happens when you hover.... so show me all the css you have for any hover in your ie css page. Tom Guthrie over 6 years ago
  • Hi Tom, sorry to be so slow to respond. I didn't get any notice that you had commented. I don't have any IE-specific code for that section. I only have this in the basic code section: #phone a:hover { color: #fefefe; border-bottom: 1px dotted #fefefe; } fmz over 6 years ago

1 answer

0
points

Just an idea, but I wouldn't be surprised if the error was ultimately caused by your use of iepngfix.htc to enable PNGs in IE6.

I would remove this and test again and if it is the cause it might be desirable to leave it out and find an alternative solution to your PNG problem.

Answered over 6 years ago by John Catterfeld