Mac IE5 multiple class hyphen bug

Posted: Thu, 2006-05-25 05:03

Lately I have been doing a lot of development using Drupal, which is a very good CMS. Drupal uses a lot of hyphen in class names to distinguish between different content types, blocks output from modules and so on.
While doing some testing of a site with IE5 on a Mac my off-sider Tom noticed some strange behavior where an element was taking on the background color of an unrelated element.

Upon further investigation I discovered that when using hyphens in classnames IE5 Mac will apply styles to elements with the pre hyphen part of the class name if they have multiple classes.
That can take a bit to get your head around so let me attempt to simplify it wit an example.

If you have styles of:

.big{font-size:x-large;} 
.red{color:red; border:solid red 1px;} 
.big-blue{color:blue;}

Then an element with the classes of big and red:
<p class="big red">This should be big and red with a red border, but IE5 Mac will see it with blue text.</p>
you would normally expect the content to be big and red.
IE5 mac see applies the styles for big, red and big-blue.

These days many web developers disregard IE5 mac, but if you have to include IE5 mac as one of your supported browsers, then this quirk is something to keep in mind.