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

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"></script>
 <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"></script>
 <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.