Can someone please tell me what I'm doing wrong here? http://174.120.61.250/~hopecent/announcements/ The footer looks great in IE7+, FF, Chrome, and Safari. It is all kinda messed up in IE6. I wish I could just say "forget IE6", but about 10% of the visitors to our church's current website use it, and this is the redesign for the site. I look forward to any input you have. Thanks!!
Well, your problems are many in there... Though most likely what's happening is that your elements are riding down for being too wide for the float area... Thing is it SHOULDN'T be working how it is in any browser, because you are declaring values that should not work at all - I think that you've accomplished the rarest of cases; IE showing you a mistake other browsers ignore. <div style="float:none; display:inline;"> <span style="float:right; font-size:18px; padding-top:0px; padding-left:35px;display:inline; margin-left: 0px; border:0px solid #ff0000;">804.708.5330</span> <span class="email_rollover" style="height:60px; width:60px; padding-left:10px; padding-top:5px; float:right; display:inline; margin-left: 0px; border:0px solid #00ff00;"> <a href="http://174.120.61.250/~hopecent/contact-us" style="border: 0px solid #ffff00;" title="Email Hope"> </a></span> <span id="twitter_rollover" style="height:60px; width:60px; padding-left:10px; padding-top:5px; float:right; margin-left: 0px; border:0px solid #00ffff;"> <a href="http://twitter.com/hopecentral" style="border: none;" title="Hope on Twitter"> </a></span> <span class="facebook_rollover" style="height:60px; width:60px;padding-left:0px; padding-top:5px; float:right; display:inline;margin-left: 0px; border:0px solid #ff00ff;"><a href="http://www.facebook.com/group.php?gid=16804112513" style="border:none; float:right; display:inline;" title="Hope on Facebook"> </a></span> Code (markup): UHG. The biggest problem here is declaring padding-top on display:inline elements. IE will obey that - EVERY other browser is ignoring it. You need to declare inline-block for other browsers to behave as IE is with those elements... The easiest solution is therein to just pull ALL of those padding-top's. If they are being ignored in FF/Opera/newer IE versions as they should, then removing them as unnecessary code will make IE6 happy. BUT Your div isn't set to wrap it's parents, so why bother even having it, the STYLE attribute is no different than using presentational markup, so get that the *** out of your HTML, and given what you have for appearance there's not one thing you are doing that warrants the USE of all those extra SPAN in the first place that you cannot apply to the anchors directly. WORSE is that you actually have ZERO content on those anchors, making it an accessibility /FAIL/ - and give nothing for search engines to look at (though honestly I'd also make those all nofollow). It's a train wreck of markup for what should probably be: <div id="footer"> <div>804.708.5330</div> <ul> <li class="email"> <a href="/~hopecent/contact-us"> E-Mail Us <span></span> </a> </li><li class="twitter> <a href="http://twitter.com/hopecentral"> Hope on Twitter <span></span> </a> </li><li class="facebook"> <a href="http://www.facebook.com/group.php?gid=16804112513"> Hope on Facebook <span></span> </a> </li> </ul> Code (markup): The empty span being for gilder-levin image replacements. EVERYTHING else goes in your external stylesheet. But as I mentioned, your problems run deep. (The site's in turdpress, so that's not really a surprise). You should probably clean up the 12 validation errors, especially with one of them being an unclosed block level element. The comment placement could be tripping rendering bugs in all versions of IE (Yes, I said COMMENTS), it's knee deep in outdated coding techniques like clearing div's, you don't have a single image on the page that warrants the use of alpha transparency .png meaning you can take an axe to that .pngfix script and reduce the image file sizes 25% or more, and likewise that javascripted menu isn't just an accessibility /FAIL/ it relies on that stupid fat bloated bullcookies jquery nonsense - all for a animation that's jerky in FF, doesn't even work in Opera... In fact I would seriously consider taking an axe to ALL the javascript on the page since it doesn't appear to be doing a damned thing for you apart from over-complicating a really simple layout. It's also got some of the real "What the?" moments I'm used to seeing out of turdpress themes - this 'gem' for example: <ul id="nav"><li class="currentli_item"><a class="navlink current" href="http://174.120.61.250/~hopecent/announcements/"><strong>Announcements</strong><span></span></a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/about-hope/"><strong>About Hope</strong><span></span></a><ul> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/about-hope/staff/">Staff</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/about-hope/location/">Location</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/about-hope/hope-elders/">Hope Elders</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/about-hope/the-environment-at-hope/">The Environment at Hope</a></li></ul> </li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/"><strong>Ministries</strong><span></span></a><ul> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/childrens-ministry/">Children’s Ministry</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/community-groups/">Community Groups</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/hope-student-ministries/">Hope Student Ministries</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/hope-young-adults/">(B)onFire - Young Adults</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/hope-student-ministries/">Hope Student Ministries</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/the-vine/">The Vine - Adult Ministry</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/mens-ministry/">Men’s Ministry</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/prayer-ministry/">Prayer Ministry</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/women-of-hope/">Women of Hope</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/world-impact/">World Impact - Missions</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/worship-arts/">Worship Arts</a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/ministries/live/">Watch Worship LIVE!</a></li></ul> </li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/sermons/"><strong>Sermons</strong><span></span></a></li> <li class="li_item"><a class="navlink " href="http://174.120.61.250/~hopecent/new-to-hope/"><strong>New To Hope?</strong><span></span></a></li></ul> Code (markup): The full URL's are the obvious flaw; but that's just wordpress jerking you around - not a whole lot it lets you do about that (even with it's alleged URL formatting controls) - Less obvious to the untrained eye is that if every LI inside your UL is getting the exact same class - and every anchor inside your UL is getting hte exact same class - then you don't classes on them. Style them off the PARENT. That's just wasteful unnecessary code.... and that's before we talk about the unnecessary strong and span tags. Looking at the markup, I'm not the least bit surprised it has cross browser issues - So... a lot to fix.
I am having a similar problem..my website is not loading properly in IE 6 but it is ok in IE8 and somewhat ok in IE7 I still haven't clue how to correct it..So see, you are not alone in this.. I would suggest you first validate the site at w3.org and then see how it is coming out. For me that also didn't help !.