2 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 8 hours 41 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5148
Points: 2746

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: 8 hours 41 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5148
Points: 2746

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
Offline
Moderator
Dallas
Last seen: 2 hours 25 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9260
Points: 3266

Mac IE5 multiple class hyphen bug

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

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

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