Pixel gap in ie

I have four Div placed using absolute positioning, each of them is a border of a rectangle they form once grouped together, in order to look like if a Dom element on the page is selected (this mimic the css border behavior using Div as overlays).

• The left one has a border left set to "4px solid red", a width of 0px and a height equal to the the height of the selected Dom element.

• The top one has a border top set to "4px solid red", a height of 0px and a width equal to the the width of the selected Dom element.

etc. you can see where this is going.

I know this is odd, but it's very useful, see aardvark for an example.

So here is how it looks like in FF, opera, safari and chrome :

alt text http://img243.imageshack.us/img243/429/captureyv.png

and here is how it looks like in ie 8 :

alt text http://img190.imageshack.us/img190/7196/capture1dv.png

I immediately thought of a box model problem, but isn't it suppose to make it narrower ? and anyway, I used jquery to get the width and height, which is supposed to prevent this kind of problem. I went across the most known ie bugs, but can't find a match.

What do you think ?

ps : this is a bookmarklet, of course i tried to change the doctype on a local file and it worked, but in production, i won't be able to.

I use the ie dev toolbar to draw a border around element positioned as absolute :

alt text http://img21.imageshack.us/img21/3425/capture2uc.png

We can see the gap.

Check the "actual" height of the BOTTOM "border" div with IE8's Developer toolbar. Make sure it is "0".

Try the following for that bottom div.

<style type="text/css">
    #bottomBorder{
        /* Adding '!important' to each CSS rule 
           will make sure nothing else in your code is 'overwriting'
           that rule. (doesn't work for IE6)
        */
        line-height:0 !important; 
        font-size:0 !important;
        height:0 !important;
        border-bottom:solid 4px red;
        position:absolute;
    }
</style>

OR try:

<style type="text/css">
    #bottomBorder{
        border-top:solid 4px red;
    }
</style>

What I'm thinking is that IE won't let you set a div to 0px height. I've seen this on divs before.