title: column background on table not displaying in ie6 and ie7
body: <p>I am working with tables and each column was given a background and each td and th has a background image (just dotted lines) positioned to the bottom to act as some sort of separator. Whilst this works on all current browsers. IE6 &amp; IE7 have refused to show my column background. </p>
  
  <p>In trying to solve this, i removed the dotted image background applied to each td, and it shows the column background. So basically its either one or the two. Any ideas how i can fix this?  </p>
  
  <pre><code>&lt;colgroup id="col1"&gt;&lt;/colgroup&gt;
  &lt;colgroup id="col2" class="slim"&gt;&lt;/colgroup&gt;
  &lt;colgroup id="col3" class="slim"&gt;&lt;/colgroup&gt;
  &lt;thead&gt;
         &lt;tr&gt;
            &lt;th class="none"&gt;&amp;nbsp;&lt;/th&gt;
            &lt;th class class="divider"&gt;
                &lt;h2&gt;Test&lt;/h2&gt;
                &lt;p&gt;Lorem ipsum&lt;/[&gt;
            &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
  #col2{
      background: url("images/col2.png") repeat;
  }
  
  .divider {
      background: url("images/dotted-line.gif") no-repeat center bottom;
  }
  </code></pre>
  
  <p>I am aware of ie6 png issues but why it should at least work on ie7, shouldn't it, and perhaps just display a white background for ie6</p>