How to fix
    's in footer that break in ie8 & ie9, but is perfect in ie7, FF, Safari & Chrome


Tags: css,internet-explorer-8,internet-explorer-9,html-lists

Problem :

I'm having one hell of a headache trying to figure this out for myself, i've taught myself the code i know, so i very well could be missing a simple thing. But i greatly need you're help and appreciate it tremendously.

I obviously want my website to look the same across all browsers and this is a major mess, that i am struggling with.

The problem is easier to explain with pictures, as such i have a screen print from ie9 and ff to show you:

Firefox, Safari, Chrome & IE7

How the footer and lists look in Firefox, Safari, Chrome & IE7

IE9 & IE8 (the grey at the bottom is the body background)

How the footer and lists look in IE9 & IE8

Here is the html:

<div id="footer">
<div id="columncon">   
    <div class="column"> 
    <h5>From The Blog...</h5>
    <ul>
        <li><a href="#">Blog Post 1<a/></li>
        <li><a href="#">Blog Post 2<a/></li>
        <li><a href="#">Blog Post 3<a/></li>
        <li><a href="#">Blog Post 4<a/></li>
        <li><a href="#">Blog Post 5<a/></li>
    </ul>
    </div>
    <div class="column">
    <h5>Social</h5>
    <ul>
        <li><a href="#">Facebook<a/></li>
        <li><a href="#">Twitter<a/></li>
        <li><a href="#">Google +<a/></li>
        <li><a href="#">RSS Subscribe<a/></li>
        <li><a href="#">E-mail Subscribe<a/></li>
    </ul>
    </div>
    <div class="column">
    <h5>Site Links</h5>
    <ul>
        <li><a href="#">Designer Resources<a/></li>
        <li><a href="#">Submit a T-Shirt<a/></li>
        <li><a href="#">Sitemap<a/></li>
        <li><a href="#">Contact Us<a/></li>
    </ul>   
    </div>      
    <div class="column">    

    <h5>Site Links</h5>
    <ul>
        <li><a href="#">Designer Resources<a/></li>
        <li><a href="#">Submit a T-Shirt<a/></li>
        <li><a href="#">Sitemap<a/></li>
        <li><a href="#">Contact Us<a/></li>
    </ul>   
    </div>
</div>    
<div id="siteinfo">
<p>&copy; 2011 <a href="http://www.tshirtslut.com">TShirtSlut.com</a></p>
</div>  

Here is the CSS:

#footer {
background: url(img/footerbg.png) 0 0;
-moz-box-shadow: 0 0px 10px #000;
-webkit-box-shadow: 0 0px 10px #000;
box-shadow: 0 0 10px #000;
height:200px;
position:relative;
clear:both;
}   
#columncon {
width:1000px;
margin:0 auto;
}   
.column {
float:left;
padding: 30px 25px 20px;
width: 200px;
}
.column ul {
    list-style:none;
}
    .column ul li {
        padding:2px 0;
    }
        .column ul li a{
            text-decoration:none;
            color:#fff;
            font-size:12px;
        }
        .column ul li a:hover{
            color:#49E20E;
        }
.column h5 {
    padding-bottom:10px;
    border-bottom:1px solid #fff;
    color:#fff; text-shadow: black 0.1em 0.1em 0.2em;
    font-weight:bold;
    font-size:14px;
           }
   #siteinfo {
   text-align:center;
width:100%;
margin:auto;
position:absolute;
bottom:0;
color:#fff;
font-size:12px; 
    }
#siteinfo a {
    text-decoration:none;
    color:#fff;
}
#siteinfo a:hover {
    color:#49E20E;
    text-decoration:none;
}

(apparently I'm not the best at inserting code XD)

Once again i truly will appreciate whoever can put this problem into context for me and allow me to solve this issue.

If you need anymore code, or info please ask and i shall get to it right away.

Thank you,

Mike

UPDATE: I have fixed the anchor tags so they validate but am still left with a double footer and the heading of the first list still remaining in the "doubled" footer. Please follow URL for a picture:

--http://tshirtslut.com/ie%28partially%20fixed%29.jpg--



Solution :

Your html is not valid. Replace all <a/> with </a>. Is your problem solved now?


    CSS Howto..

    If a child has a certain specific value, how to check and make “true” so that hover of the parent yields a result?

    JavaScript: How to add 'word-wrap' style to element

    How to horizontally and vertically center two images on top of each other?

    How to align elements so CSS fixed doesnt overlap on page load

    CSS: How to crop image that has any size?

    How to share images between subdomains?

    How to add css for specific input type text

    How to apply CSS to only immediate children of a certain class

    How to set the maximum height of CSS tables?

    How to trigger onClick event properly

    How can you implement a grabbing cursor icon in Chrome?

    Zend_Form - add CSS Class :: How can I add css class to label in Zend_Form?

    JQuery: how to make this variable negative before declaring it as a CSS value?

    How to position a html element under a fixed div

    how to do display none using css

    How to keep button active after press with jQuery

    In CSS, how can I make a div as high as the entire page?

    How to fix error from posting html element and prevent it from running

    How to align this CSS menu to the right of its containing div?

    How to get the sticky footer to work?

    How to write CSS keyframes to indeterminate material design progress bar

    How can I avoid my headers and footers being broken when displaying content wider than the viewport?

    How to use Custom Fonts using CSS?

    how to make table header freeze/fixed when scrolling in html/css?

    How to exclude specific the form from the css applied to body [duplicate]

    How do I apply CSS styling to a
    block?

    How to get the text in the custom dialog to be centered vertically

    How to maximum size without exceed the size?

    How to restrict character limit by line or # of characters with css?

    How do I stop a CSS layout from distorting when zooming in/out?