CSS Small-Caps Working in IE Not in Firefox

Posted on 09/24/2009 at 11:03 am by Kevin Wentworth
Viewed 14,891 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?

Small-caps only working in Internet Explorer?

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!

  1. div#topPromo h2 {
  2.     margin: 30px 0 0 400px;
  3.     padding: 0;
  4.     font-family: "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;
  5.     font-size: 3em;
  6.     font-weight: bold;
  7.     font-variant: small-caps;
  8.     text-transform: none;   //override a text-transform:uppercase
  9.     color: #022fae;
  10. }


-Kevin Wentworth


Bookmark and Share

Tags for CSS Small-Caps Working in IE Not in Firefox

Css | Web Design | Firefox | Example | Internet Explorer | Ie

Comments for this Posting

No comments. Be the first to post a reply.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design