<!--[if IE6]>
    <link rel="stylesheet" type="text/css" href="ie6fix.css" />
<![endif]-->

However we can avoid extra CSS files (for internet explorer 6) by assign first all the necessary properties for it, an then reassign them for others modern browsers (firefox, safari, opera and ie7) . For example:

div.mydiv {
    padding: 5px;
    position: absolute;
    top: 5px; /* this should be 3px except ie6 */
    right: 10px; /* this should be 7px except ie6 */
}

/*
redefine the properties for all browser that
support CSS selectors (not ie6!)
*/
div[class~="mydiv"] {
    top: 3px;
    right: 7px;
}

It’s important to notice that we should use the “contains” selector (~=), in order to work even if the div into the page as several CSS classes applied (like <div class=”mydiv customer_info”>).

$("#myDivID").doMagic({...});

In somehow the jQuery’s function used, annoyed ie6 due to the CSS styles that it applied to the div. After a couple of minutes of debugging, I realized that we should have needed to spend a full day or more to fix the problem at the root (due to the complexity of the page content). So I decided to isolate the problem by using the CSS positioning technique. Fundamentally I put the div (“#myDivID”) into another div with relative position and set the first with an absolute position, in this way:

<div style="position: relative; width: Npx; height: Npx;">
    <div id="myDivID" style="position: absolute; top: 0; left: 0;"></div>
</div>

With this expedient “myDivID” is now “trapped” into the parent div and it can’t influence the others page elements.