[CSS] font-variant: small-caps

[fuzzy_logic]

When I apply the small-caps attribute to the word "Experience", I want it to look like this:

EXPERIENCE

So basically, the upper-case letters should be bigger than the lower-case letters, even though they will both show up as capitalized. But as it turns out, all letters become capitalized and have the same size. Is there any way to have the word appear the way I want?

[+mrbester MVC]

If it's only one word, the you could get away with using the psuedo-class ::first-letter, but that isn't going to work in IE. To do all words, you'd have to wrap the first letter of each word in a span and set font-variant: normal; in the CSS to affect those spans:

<style type="text/css">
.smallCaps { font-variant: small-caps; }
.smallCaps span { font-variant: normal; }
</style>
.
.
.
<div class="smallCaps"><span>E</span>xperience</div>

[fuzzy_logic]

I was afraid to hear something like that. But thanks anyway!