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;
}
Posted by jerothe in