MainelyDesign.com Blog

CSS Small-Caps Working in IE Not in Firefox

Posted on 09/24/2009 at 11:03 am by Kevin Wentworth
Viewed 2,287 times | 0 comments

Another IE/FF Inconsistancy?

I thought I had ran into an interesting (and new) CSS bug.  I was using Trebuchet MS as my font for my H2s.  It was rendering perfect in Internet Explorer but not in Firefox.  In Firefox, all caps.  In IE, small-caps.  What gives?

C Stands for Cascading...

It turns out that I hadn't specifically told the H2 to display text as normal.  It was inheriting a style="text-transform: uppercase" from another CSS style definition.  In IE, I guess font-variant trumps text-transform.  In Firefox, it's the other way around.

text-transform Beats font-variant in FF

If small-caps isn't displaying properly in Firefox, chances are you've defined a "text-transform: uppercase" previously to that element.  Just add that to the style and you'll be cross-browser compatible again!

Cheers,

-Kevin Wentworth