IE7’s Implicit CSS Quirks

If your developing an absolutely positioned site layout, and wondering why IE always seems to be a bit ‘off’, it might be because of the odd implicit CSS values that it has.  For example, the BODY element has an implied 2px (medium) thick border, that is set to the ‘inset’ style.

This is done, I guess, to give the page a visually appealing look inside the IE container … but is obnoxious as it has to be overriden in CSS explicitly and if you forget … your layouts are all off.

I wrote a rather simple QUnit test, as an exploration of the QUnit framework and found that my tests kept failing in IE due to a 2px difference in absolutely positioned elements offsets — which, should always be the top/left values when the element is explicitly positioned absolutely (top and left are both set, no inheritence).

To determine this, my test utilized the isObj() function of QUnit, and looked similar to this:

[javascript]
module(“Absolute Position”);
test(“Top Left (0,0)”, function() {
$(‘#testDiv’).css({position:’absolute’, top: 0, left: 0});
var expected = {top: 0, left: 0};
ok(true, $(‘#testDiv’).offset().left + ‘, ‘ + $(‘#testDiv’).offset().top);
isObj(expected, $(‘#testDiv’).offset(), “Element should be {left: 0, top: 0}”);
});
[/javascript]

The first assertion, ‘ok’, was done simply so I could see the top/left values in the event of a test failure. I think a nice addition to the QUnit framework would be a ‘pretty print’ function for objects so you could see exactly why a test failed when the expected result is a simple object (no functions attached to it).

Leave a Reply