How to override universal selector font-size in IE6

Question

Hi folks... I have an issue in an ExtJS-based application, however, I don't believe the problem to be ExtJS-specific (I could be wrong, but I suspect not).

The issue is that I have a universal selector like so:

* {
  font-family : arial;
  font-size : 10pt;
  font-weight : bold;
}

Later on I have some markup (generated by ExtJS) as seen in Firebug:

<td class="x-date-active" title="">
  <a tabindex="1" class="x-date-date" hidefocus="on" href="#">
    <em>
      <span>20</span>
    </em>
  </a>
</td>

This is one of the dates on a calendar widget. Now, the problem I have is that I need to adjust the font size on the test inside the . So, I tried overriding both the x-date-active and x-date-date classes, like so:

.x-date-active { font-family : arial; font-size : 8pt; color : #ff0000; }

Same content for the x-date-date class. The red color works, so I know I'm targeting the correct style. However, the font-size DOES NOT take effect, the size specified in the universal selector continues. This happens in IE6 only, it works as expected in Firefox. I've tried adding !important to the font-size attribute, but that doesn't help.

Is there any issue overriding a universal selector as far as font sizes goes in IE? I've spent about two hours Googling to no avail. Any help would be appreciate!

Answer 1

You're setting yourself up for a world of hurt using the universal selector, but try adding the following code at the bottom of your CSS file:

.x-date-active * { font-size: 8pt; }