Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Tim Quincey
Tim Quincey
6,273 Points

Ie8 support for G-Grid

I have just completed the CSS Layout Techniques by Guil Hernandez which was fantastic and so easy to follow. I feel like i finally understand how to use the grid properly! My only query is providing 8 support as i believe pseudo-elements are supported ie9+. Does anyone have any ideas how this super simple grid can be tweaked to provide ie8 support? below is the github link..

https://github.com/Guilh/G-Grid

html

<html>
<head>
    <title>Grid Layout</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/grid.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="main-header">
        <div class="grid-container" style="background-color:blue;">
            <h1 class="grid-2 main-logo"><a href="#">Logo</a></h1>
            <ul class="grid-8 main-nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
    </header>
    <div class="main-banner hide-mobile">
        <h1>This is the Main Banner Heading</h1>
        <p>Andouille pork chop pancetta drumstick ground round beef ribs swine brisket ham.</p>
    </div>
    <div class="grid-container">
        <div class="grid-8">
            <h2>Primary Content</h2>
            <img class="feat-img" src="http://lorempixel.com/400/300" />
            <p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock.</p>
        </div>
        <div class="grid-4">
            <h3>Secondary Content</h3>
            <p>Meatball pastrami shoulder, brisket ribeye spare ribs turkey tongue strip steak t-bone.</p>
        </div>
    </div>
    <footer class="main-footer">
        <p>&copy;2014 Example Layout</p>
    </footer>
</body>
</html>

css

/* Global
================================ */

.grid-container {
    padding-left:10px;
    padding-right: 0px;
    margin-left:auto;
    margin-right:auto;
}

img {
    width: 100%;
}

/* Media Queries
================================ */

@media (min-width: 1px) and (max-width: 767px)  {
    .grid-container > [class^="grid-"] {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .hide-mobile {
        display: none;
    }
}

@media (min-width: 768px) {

    /* Columns
    ================================ */

    .grid-container > [class^="grid-"] {
        float:left;
        min-height:1px;
        padding-left:10px;
        padding-right:10px;
        margin-left:2%;
    }
    /* Only supports ie9+*/
    .grid-container > [class^="grid-"]:first-child {
        margin-left:0;
    }
    .grid-container > [class^="grid-"]:last-child {
        float:right;
    }

    /* Columns are 65px wide, with 20px gutters
    =========================================== */

    .grid-1 {
        width:6.5%;
    }
    .grid-2 {
        width:15%;
    }
    .grid-3 {
        width:23.5%;
    }
    .grid-4 {
        width:32%;
    }
    .grid-5 {
        width:40.5%;
    }
    .grid-6 {
        width:49%;
    }
    .grid-7 {
        width:57.5%;
    }
    .grid-8 {
        width:66%;
    }
    .grid-9 {
        width:74.5%;
    }
    .grid-10 {
        width:83%;
    }
    .grid-11 {
        width:91.5%;
    }
    .grid-12 {
        width:100%;
    }

    /* Clearfix
    ================================ */

    .group:after,
    .grid-container:after {
      content: " ";
      display:table;
      clear:both;
    }
}

@media (min-width: 1200px) {
    .grid-container {
        max-width: 1100px;
    }
}

Thanks in advance.

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

According to this table here:
http://www.quirksmode.org/css/selectors/

I think the only thing you will have a problem with is :first-child and :last-child

If you are already using one of the supported js libraries in your project then you can take a look at adding http://selectivizr.com/ to it.

It makes the selectors work in ie8 by utilizing a supported js library.

IE8 market share is getting pretty low now and with Microsoft officially dropping support for winXP in April, we may not really have to worry about IE8 for much longer. I imagine personal users might decide to live with the security risk but any businesses still using it probably can't afford to take the risk.

Tim Quincey
Tim Quincey
6,273 Points

Perfect thanks for your answer :)