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;

}

Comments

No comments yet.

Leave a comment