Web site footer is out of whack when i test it in firefox/IE however works fine in Chrome

Question

site: http://ovi-opus2.rightnowdemo.com/app

here is the footer....if anyone has any idea on how to fix this issue please let me know. it seems like there is some errors that were detected by http://validator.w3.org/ where it said that Attribute alt not allowed on element a at this point. …el="nofollow" href="http://www.youtube.com/user/">YouTube

<div class="footerbackground">
    <div class="footercontent">
        <div class="main">
            <div class="footersocial">
                <ul id="footersocial">
                    <li id="facebook_foot"><a title="Facebook" alt="Facebook" target="_blank" rel="nofollow" href="http://www.facebook.com/OpusDev"><span>Facebook</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="http://www.facebook.com/OpusDev">Facebook</a></li>
                    <li id="twitter_foot"><a title="Twitter" alt="Twitter" target="_blank" rel="nofollow" href="http://twitter.com/#!/opus311"><span>Twitter</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="http://twitter.com/#!/opus311">Twitter</a></li>
                    <li id="youtube_foot"><a title="YouTube" alt="YouTube" target="_blank" rel="nofollow" href="http://www.youtube.com/user/"><span>YouTube</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="http://www.youtube.com/user/">YouTube</a></li>
                    <li id="flickr_foot"><a title="Flickr" alt="Flickr" target="_blank" rel="nofollow" href="http://www.flickr.com/"><span>Flickr</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="http://www.flickr.com/">Flickr</a></li>
                    <!--<li id="mobile"><a href="http://itunes.apple.com/gb/app/denver-311/id484143327?mt=8" rel="nofollow" target="_blank"
                        alt="Mobile" title="Mobile"><span>Mobile</span></a></li>-->
                    <li id="RSS_foot"><a title="RSS News Feed" alt="RSS News Feed" rel="nofollow" href="/DesktopModules/Orizonti_NukeNews/getRSS.aspx?pid=728&amp;tid=442244&amp;mid=504977 "><span>RSS</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="/DesktopModules/Orizonti_NukeNews/getRSS.aspx?pid=728&amp;tid=442244&amp;mid=504977">Newsfeed</a></li>
                    <li id="opendata"><a title="Open Data Catalog" alt="Open Data Catalog" rel="nofollow" href="http://opus311.com/"><span>Open Data Catalog</span></a></li>
                    <li style="height: 15px!important; padding: 10px 30px 0px 0px!important"><a target="_blank" href="http://opus311.com/">Open Data Catalog</a></li>
                </ul>
            </div>
            <footer>
                <div class="col_1">
                    <h3>Stay Informed</h3>
                    <ul class="list1">
                        <li><a target="_blank" href="/connectdenver">Connect with Opus</a></li>
                        <li><a href="/emergencyalerts">Emergency Alerts</a></li>
                        <li><a href="/connectdenver">News &amp; Subscriptions</a></li>
                        <li><a href="/mayorblog">Mayor's Blog</a></li>
                        <li><a href="/connectdenver">More</a></li>
                    </ul>
                </div>
                <div class="col_2">
                    <h3>Apps &amp; Tools</h3>
                    <ul class="list1">
                        <li><a href="/connectdenver">Connect Opus App</a></li>
                        <li><a href="/apps4/311">311 Help App</a></li>
                        <li><a href="/recprograms">Recreation App</a></li>
                        <li><a href="/property">Property App</a></li>
                        <li><a href="/onlineservices">More</a></li>
                    </ul>
                </div>
                <div class="col_3">
                    <h3>Services</h3>
                    <ul class="list1">
                        <li><a href="/onlineservices">Online Services</a></li>
                        <li><a href="/livingindenver">Neighborhood Services</a></li>
                        <li><a href="/doingbusiness">Business Services</a></li>
                        <li><a href="/citygovernment">Government Services</a></li>
                        <li><a href="/atoz">More</a></li>
                    </ul>
                </div>

                <div class="col_4"><h3>Get Help</h3><div id="footer_logo"><a title="Denver 311 Help Center" href="/311" class="footer_logo"></a></div>
                </div></footer></div>
                <div class="clear"></div>
                <div class="footerbar">

                    &copy; Copyright 2014 Opus Group LLC  |  <a href="/jobs">Jobs</a> | <a href="/atoz">A to Z Services</a> | <a href="/terms">Terms of Use</a> | <a href="/privacy">Privacy &amp; Security Policy</a>
                    <a href="javascript:__doPostBack('dnn$dnnLOGIN$cmdLogin','')" class="login" id="dnn_dnnLOGIN_cmdLogin">Login</a>
                </div>

        </div>
    </div>

Answer 1

It is hard to tell from your code given here (if you do in fact have a closing footer tag, I would suggest editing your question to include it), but from the website link you gave, it looks like it's possible that part of your CSS isn't getting imported correctly. For some reason Chrome seems to be picking up the styles but the other browsers aren't. Chrome tends to overlook some coding errors to render a page where the others don't.

For instance, your h3 styles are getting pulled from somewhere other than an external style sheet. Look at where those styles are coming from (something called "app") and try to fix how you are importing those styles.

Answer 2

Well, your code is pretty messy, but for what I can see in W3 validator, you have a lot of errors caused by non closed elements. Just go to your page validation results and check line by line all the 29 issues detected. Then try your site's CSS issues, debug and if the problem still persists, then at least it will be a lot easier to isolate it. Pay attention to the CSS results in line 794, you have some really weird errors that prevents the page to load fast and probably cause the non rendering issues. Probably a non closed item, but really, there's a lot to analyze

Right now, it's impossible to find what the problem is when you have such amount of issues