CSS: text-transform: inherit; causes Explorer 5 crash

Posted by Pierre Igot in: Technology
December 1st, 2004 • 6:27 am

I am telling you, when you design web sites that make use of CSS, you encounter some pretty weird bugs.

I had a couple of pages on my web site that would systematically cause Explorer for Mac (version 5.2.3) to crash while loading them. The pages loaded just fine in Safari, Camino, etc. These pages were based on PHP code, some JavaScript, and XTHML/CSS. I had no idea what might be causing the crash.

Luckily, I had a third page that was very similar to the two pages that were causing the crash, and for some reason was not causing Explorer to crash. So I opened the pages side by side in BBEdit and tried to compare them, in order to indentify the differences that might be causing the crash.

I quickly narrowed it down to the fact that the text in the two pages that crashed made use of a character style that I had in my CSS style sheet and used for superscript:

.expo
{
	font-size: 75%;
	vertical-align: 3pt;
	text-transform: inherit;
}

Pretty innocuous, right? Well, I commented out the text that contained the references to that style, and sure enough the pages were no longer causing Explorer to crash.

Then I realized that the “text-transform: inherit;” part was not something that I had put there, but something that BBEdit had automatically put there for me when I had edited the style definition in my style sheet. I am not really sure what that particular line does… (It seems to me that inheriting the character formatting settings of the underlying block of text would be something that happens by default anyway.)

I simply removed that line from the style that I didn’t feel I needed in the first place, and voilà. The crashes were gone.

Why does the inclusion of text-transform: inherit; in that particular style definition in my style sheet cause Explorer to crash? I have no idea. But I am glad it didn’t take me hours to figure this one out! Because I definitely need my web site to work properly in Explorer. I can live with things not looking exactly right, but an application crash is simply unacceptable.

Phew.


3 Responses to “CSS: text-transform: inherit; causes Explorer 5 crash”

  1. Evan Gross says:

    Welcome to the wonderful world of CSS browser bugs! I ran into this sort of thing a fair bit when learning CSS and creating my own site.

    There are plenty of resources out there that list potential gotchas like this. Here area couple:

    http://www.macedition.com/cb/ie5macbugs/
    http://css.nu/pointers/bugs-ie.html
    http://www.l-c-n.com/IE5tests/misc/index.shtml

    You get the idea…

  2. J. King says:

    ‘text-transform’ is indeed inherited, so there is no need for that style definition. It does seems like an unlike thing to make an agent crash… I guess that’s just further proof that we need a comprehensive CSS test suite.

  3. Pierre Igot says:

    Thanks for the additional information. It does look like the crash might have been due to the combination of

    vertical-align: 3pt;

    and

    text-transform: inherit;

    , not just to the latter by itself, because there is a similar-looking crashing bug mentioned on the CodeBitch page that Evan referred to.

    Lord :-/.

Leave a Reply

Comments are closed.