css problems w/ ie 8 and below

Question

I've put together this small little piece but I'm having problems with the renderings below IE9.

I've been going over a bunch of tutorials and have even tried a version of the "html shiv" technique, but to no avail.

I'm not sure what the problem is. I cross tested it and it works in pretty much every browser minus IE8 and below. I'm just curious if I'm going to have to rework an entire style sheet for the IE8 and less bunch or if I'm just missing something.

In IE8/IE7/IE6 the hover states for the buttons work, but it's as though all of the boundaries disappear.

http://www.brodieyazaki.com/matt_tiles

is a live working version.

Here's the HTML (I would include the CSS but it's long, but you can view it in developer tools sorry for the inconvenience).

    <section id="tile">
    <button id="toggle_button"></button>
    <section id="tile_content">
        <figure id="tile_content_figure" class="clearfix">
            <img src="imgs/tile_pic.png">
            <h1>
                &#8220;Siri's Default Settings Leave
                Your iPhone 4S Exposed&#8221;
            </h1>
        </figure>

        <div id="tile_content_link">
            <p id="from_in">
                From <a href="#">nytimes.com</a> in <a href="#">arab spring</a> 
            </p>
        </div>

        <div id="tile_content_comment" class="clearfix">
            <img src="imgs/user_img.png">
            <p>
                "This is the basic version of the tile"
            </p>
        </div>
    </section>

    <footer id="tile_foot">
        <div id="foot_wrap" class="clearfix">
            <figure class="like_view">
                <img src="imgs/like.png">
                <span>10</span>
            </figure>
            <figure class="like_view">
                <img src="imgs/view.png">
                <span>100</span>
            </figure>
            <article id="social" class="clearfix">
                <button id="facebook"></button>
                <button id="tumblr"></button>
                <span>share</span>
            </article>
        </div>
    </footer>
</section>

Just looking to get pointed in the right direction. I know that the CSS has features that IE8 and below won't pick up, but the head scratcher for me is that it's as though the style sheet in its entirety is broken.

please help, and thank you

Answer 1

< ie9 doesn't understand your html5 elements: article, footer, section, figure; offhand i'd just go ahead add html5.js and then turn them on in your css:

article,figure,section,footer{display:block}

i think that should fix what you are talking about

Answer 2

You have lots of duplicate id's. id's must be unique per element or a browser may ignore subsequent instances of the id. You should also declare a document encoding, among other HTML Validation errors...

http://validator.w3.org

Your site is more likely to work as expected, in all browsers, when its HTML code is fully compliant.