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