Recent Posts
- (09/10) Fixing Warning: the ECDSA host key for 'github.com' differs from the key for the IP addressTAGS:Web Server Admin
- (12/26) CakePHP 3 - Getting List of Column Definitions from a Table (like schema())TAGS:CakephpCake3
- (09/14) Change Order of Loaded Behaviors in CakePHP 3TAGS:Cake3CakephpWeb ProgrammingPhp
- (05/29) CakePHP 3 - Accept JSON Header Only Working When Debug FalseTAGS:Web ProgrammingCakephpCake3
- (05/23) Remove All Events from Google Calendar (Reset Calendar)TAGS:Web ProgrammingPhp
- (11/08) Google Tag Manager (GTM) Not Firing Default PageView EventTAGS:Web ProgrammingJavascriptGoogle Tag Manager
- (10/13) In PHP, how do you get __toString() Magic Method Result without calling echo?TAGS:CakephpCake3Cakephp 13PhpWeb Programming
- (11/14) Getting output from shell_exec() at all timesTAGS:Web ProgrammingWeb Server Admin
Subscribe to my feed
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 15,296 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!
- div#topPromo h2 {
- margin: 30px 0 0 400px;
- padding: 0;
- font-family: "Trebuchet MS", Trebuchet, Helvetica, Arial, sans-serif;
- font-size: 3em;
- font-weight: bold;
- font-variant: small-caps;
- text-transform: none; //override a text-transform:uppercase
- color: #022fae;
- }
Cheers,
-Kevin Wentworth
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!
