2 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 hours 47 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5108
Points: 2704

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.

Tags:
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 hours 47 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5108
Points: 2704

Mac IE5 multiple class hyphen bug

Looks like this isn't related to the hyphen after all and is actually a Whitespace parsing bug

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 7 min 36 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9175
Points: 3168

Mac IE5 multiple class hyphen bug

So, if big-blue were bigblue, it would do the same?

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.