A bugs in IE 5.0 with the use of text-transform and font in the same declaration.

I found another IE 5.0 bug today.

When using the text-transform property in the same declaration as the font property, IE 5 ignores the text-transform.

For example;

div.testContainer{

text-transform:uppercase;

font:bold 12px verdana, arial, sans-serif;

}
This would totally ignore the fact that you may want the text in the testContainer to be completely capitalized.

When doing some research, I found that it didn’t help if I wrote out the font shorthand into it’s individual properties like font-size, or font-weight, like some articles claimed.

What I did find worked for me was to seperate the two, where the font tag was inherited.

In my real life example, I actually had a header defined specifically for use inside of my div container. So for our previous example I had this;

div.testContainer{

width:400px

margin:0 auto;

}

div.testContainer h1{

text-transform:uppercase;

font:bold 12px verdana, arial, sans-serif;

}
As you see I changed the previous example a little. But you get the point. I had a header that I specifically wanted to use inside of testContainer so that helped facilitate my solution. In the end, I actually took the font declaration and moved it into the div container, so the header declaration would inherit it but IE still would recognize the text-transform declaration. So now our example looks like this.

div.testContainer{

width:400px

margin:0 auto;

font:bold 12px verdana, arial, sans-serif;

}

div.testContainer h1{

text-transform:uppercase;

}

Here are some similar arcade posts

• How do I reduce the size of my CSS file? Can you teach me some “shorthand” tricks?
• Which should I use, relative or absolute positioning?
• How to use float to get a gallery of thumbnails to evenly space each other.
• When I have an image right next to text in a table cell, why does the text start at the baseline of the image?
• How do I write my css classes with div tags?

CSS - XHTML, Design Topics

 Print This Post

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.