1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

font-variant: small-caps and text-transform

Problem

Using "font-variant: small-caps" causes "text-transform: uppercase || lowercase" to be ignored.

Solution

Alas, there is no standard for fixing this bug.

Detailed description

If you assign a value to the following property in your CSS:

.will-render { font-variant: small-caps; }

... Internet Explorer will subsequently ignore either of the following properties in your rendered page:

.wont-render-1 { text-transform: uppercase; }
.wont-render-2 { text-transform: lowercase; }

Bug originally submitted by ppk on Quirksmode.org

A somewhat obscure workaround - massaging the markup by way of innerHTML, has also been suggested by Krijn Hoetmer (read article).

Text ID: FONT_VARIANT_TEXT_TRANSFORM

---