FixIE

080215

FixIE is a little script that I've created to overcome a few of the CSS selector limitations in IE6. What it does is adding a few helper classes to certain elements/states, which then can be used in your .css files to reference those elements/states. In particular:

• It adds the"first-child" class to the first child of certain containers (by default UL and OL).
• It adds/removes the class "hover" to LI elements inside certain containers (by default an element with id="nav"), to provide support for CSS drop-down menus.
• It adds a class to all INPUT elements, matching their type. That is, all inputs of type "text" will also have the class "text", and so on.

It is possible to configure the first two features, choosing any number of containers. For example, you could add first-child functionality to all divs, or apply the hover functionality to several navigation menus (see the JS source).

In order to use it, all you have to do is load the script only for IE6 or lower (I personally use conditional comments). The script doesn't include any browser detection, so you should make sure it loads only for IE browsers. Then you can use the helper classes in your CSS, for example:

li:first-child {...}
li.first-child {...} /* for IE<7 */

input[type=submit] {...}
input.submit {...} /* for IE<7 */

#nav li ul {display:none}
#nav li:hover ul {display:block}
#nav li.hover ul {display:block} /* for IE<7 */

FixIE details

• It's lightweight.
• It doesn't require any external JS libraries.
• It doesn't parse your CSS files, and the only DOM manipulation is the addition of classes to existing elements.
• It executes after the DOM loads, in order to provide the fastest possible response. This means that the classes are added before CSS, other JS and images are finished downloading.
• It works in IE5, IE5.5 and IE6 for Windows.
• You can use it for whatever you want and change it in any way you like (it is distributed under the MIT license).

Download FixIE

Current version: 0.5b. Right click and 'Save link as...'.

• FixIE source
• FixIE packed

Installation instructions

1. Edit the .js file if you want to change the default behaviour (just add or remove elements form the arrays in the calls to activateMenu and addFirstChild).
2. Rename the file to FixIE.js, and save somewhere on your website project.
3. Link to this file in the header of your HTML pages using the SCRIPT element, wrapped in IE conditional comments so it only affects IE6 or lower.

Usage

Simply use the available helper classes in your CSS files: .first-child, .hover, and for INPUT elements: .text, .checkbox, .radio, etc. (any of the valid INPUT types). Remember that not all elements will have the first-child and hover classes, only those affected by the config options you've set up at the top of the FixIE.js file. Remember also that only IE6 and lower will have these classes, so you must still use the normal selectors for the rest of browsers, like input[type=submit], li:hover, etc.

Posted in: English, Web, JavaScript
Tags: ie6, programming