Avoid CSS hacks for internet explorer 6 (ie6) by using selectors

Is a common practice to use CSS hacks in order to assign specif stylesheet to internet explorer 6, like:

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

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”>).

CSS tip: if you can’t remove the evil, you can imprison it!

prisonYesterday a colleague asked me to help her in debugging a crazy behavior of internet explorer 6 (all the others browsers worked fine!), which caused the wrong display of the boxes inside the page. The bug was caused by the rendering of a jQuery powered div, ie one of those things like:


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>

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