Yesterday 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:
$("#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 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.
