One of the lingering issues with providing your web site with compatability with Internet Explorer 6 lies in its lack of implementation of multiple class support. Every other web browser supports this capability but if you need to support IE6, you won't be able to use it.
In any browser, the CSS selector .big.blue should only be applied to elements that have both the big and the blue classes. but Internet Explorer 6 ignores all but the last class definition, effectively making .big.blue into .blue.
Using this lightweight jQuery plug in allows you to forget about these limitations and get on with your coding. Just include the plugin file and it will automatically load with the page. Only if you are loading more elements with AJAX or changing classes after the DOM loads do you need to call the helper function.
This script fixes selectors that use multiple classes in them. (e.g. .heading.main) It doesn't do anything to fix selectors with an ID followed by a class selector. (e.g. #heading.main)
All that needs to be included is the jQuery library and this script for these features to work. No extra Javascript coding is required.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.ie6MultipleClass.js"></script>
Using the following CSS, only .big.blue should be colored blue but Internet Explorer 6 ignores all but the last class definition making .blue have blue text as well.
.big { font-size: 18px; font-weight: bold; }
.big.blue { color: #00c; }
This is p.big.blue -- I should have blue text
This is p.blue -- I should have default text
These are only required if you need to change the rules that are applied or apply the rules again (when loading DOM through AJAX for example).
Reapplies the loaded stylesheet to the page. (useful if DOM changes from AJAX or otherwise)
jquery.MultipleClass.zip (5.5kB) - Package containing this document, source code, minified library