Weird CSS + Browser Problem

Question

Here is my code : <h:dataTable id = "brandTable"
var="brand" value="#{statisticsController.breakdownForBrand}"
width="500"
headerClass="headers"
columnClasses="statsColMain"
rowClasses="rows"
style="display:none;">
                         <h:column>
                              <f:facet name = "header">
                                   <h:outputText value="Brand" />
                              </f:facet>     
                              <h:outputText value = "#{brand.attributeValue}" />
                         </h:column>
                         <h:column>
                              <f:facet name = "header">
                                   <h:outputText value="All Searches" />
                              </f:facet>                         
                              <h:outputText value = "#{brand.allSearches}" />
                         </h:column>
                                   <h:column>
                              <f:facet name = "header">
                                   <h:outputText value="Unique Searches" />
                              </f:facet>                         
                              <h:outputText value = "#{brand.uniqueSearches}" />
                         </h:column>
                    </h:dataTable>Here is the css:
.headers{
text-align: center;
font-style: italic;
background: #90BAE2;
white-space: no-wrap;
.rows{
white-space: no-wrap;
text-align: center;
.statsColMain{
width: 100px;
text-align: center;
My problem is whenever I use IE my data table is not using any css, but when I used Firefox everything is OK. Take note that it is only in the data table that I'm having problems (using IE) with regard to css, other parts of the screen are working ok vis a vis with css even when using IE. What seems to be the problem?

Answer 1

Everytime when you change the CSS, and if the browser caching is enabled, then do a hard reload to get the changes reflected. A hard reload in IE, FF and Opera can be done with CTRL+F5.