How to change the color of rich:dataTable header

[leelavathic]

I have the following datatable

<rich:dataTable>
 <f:facet name="header">
 <rich:columnGroup style="width:100%;">
 <rich:column width="150px;" styleClass="dataTableHeader">
 <h:outputText styleClass="dataTableHeaderText" value="S.No" />
 </rich:column>
 <rich:column width="100px;" styleClass="dataTableHeader">
 <h:outputText styleClass="dataTableHeaderText" value="Name" />
 </rich:column>
 <rich:column width="265px;" styleClass="dataTableHeader">
 <h:outputText styleClass="dataTableHeaderText" value="Experience" />
 </rich:column>
 </rich:columnGroup>
 </f:facet>
</rich:dataTable>

.dataTableHeader{
 background-color: #BFD6FA;
}

.dataTableHeaderText {
 font-weight:bold;
 font-family:Arial;
 font-size:11px;
 color: #1D4F76;
}

I tried changing the colour of the header by applying the styleClass to the rich:column as above. I'm able to change the colour in firefox and safari but not in IE 7

Is this a bug in IE7 or is there any other solution?