How do I make Pseudo classes work with Internet Explorer 7/8?

Question

I've written the following code to create a three-column layout where the first and last columns have no left and right margins respectively (by definition, the three columns will have the exact same class as they're dynamically generated--see last paragraph):

#content {
    background-color:#edeff4;
    margin:0 auto 30px auto;
    padding:0 30px 30px 30px;
    width:900px;
}
    .column {
        float:left;
        margin:0 20px;
    }
    #content .column:nth-child(1) {
        margin-left:0;
    }
    #content .column:nth-child(3) {
        margin-right:0;
    }

.width_33 {
    width:273px;
}

HMTL:

<div id="content">
    <cfoutput query="IndexView" group="pName"> <!--loop one to create the columns -->
        <div class="column width_33"> <!-- Columns -->
            <h3>#IndexView.pName#</h3>
            <ul>
            <!---LOOP two--->
            <cfoutput>
                <li>
                    #IndexView.titles#
                </li>
            </cfoutput>
        </div>
    </cfoutput>
</div>

The problem is that this code does not work in Internet Explorer 7 and 8? The only pseudo class I can use with IE (in this case) would be "first-child," but this does not eliminate the right margin on the third and last column. Does anyone know of a way I can make this code work on IE 7/8?

A important side note: The three columns are being generated dynamically through a query loop, and therefore the class attribute for each column will be identical.

Answer 1

You could try something like ie7.js. which uses javascript to make these things work.

Short of that, it doesn't look like ie8/ie7 support it.

Answer 2

I hate to say it, but since IE doens't have proper support for the pseudo classes you're trying to use, you might have to resort to Javascript to solve your problem.

You could write a pretty simple jQuery function that runs on document.ready() that matches your psuedo classes and adds the proper styling to them. Load the Javascript file in an IE Conditional Comment and you're good to go.

Answer 3

I would use jquery. You could even wrap the call to the script in a conditional comment. jquery 1.4 is fully CSS 3 compliant in terms of selectors, so you can use the same selectors and then assign a class to the elements you want to style. Something like:

This is the jquery code:
 <!--[if IE]>  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
 <script type="text/javascript"> 
    $(function() {
     $("#content .column:nth-child(1)").addClass("childone");
     $("#content .column:nth-child(3)").addClass("childthree");
    });
 </script>
 <![endif]-->
This is your CSS, with the new classes for IE support:

 #content .column:nth-child(1), .childone {
    margin-left:0;
 }
 #content .column:nth-child(3), .childthree {
    margin-right:0;
 }

Edit

The above will work but you are not familiar with jquery or how to make changes like adding classes dynamically, I can understand your confusion and resistance to the solution. Here is a slightly modified version that may make things a bit clearer:

 <!--[if IE]>  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
 <script type="text/javascript"> 
     $("#content .column:nth-child(1)").css("margin-left","0");
     $("#content .column:nth-child(3)").css("margin-right","0");
 </script>
 <![endif]-->

In this case, instead of using dummy classes that you can add into your stylesheet, the script simple adds the same style rules you want to the same CSS selectors. I prefer to use dummy classes because it allows me to have several style rules for that same class without clogging up the script, but since you only have one rule for each selector, this makes a nice example of how jquery is working, whichever method you go in.