Pixel gap in ie

Question

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.

Answer 1

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.