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.

Answer 2

I think you should fiddle with your DOCTYPE as this usually gets IE going in the right direction

Answer 3

I would assume this issue has something to do with margins and padding. Do you have any information or spacers inside of your DIVs? This could result in extra space that you did not account for.

I would adjust the divs with margin:0; border-collapse:collapse;

Also, as you had mentioned, on your bottom DIV you should have that set to its top border to try and prevent such gaps from occurring due to any margins or spacing within the DIV itself.

Answer 4

Could it be that IE8 is not including the height of the border as part of its height parameter? Try adding the size of the border as well.

Answer 5

Ok,I have no solution for now, but I just display the bottom div border top instead of its border bottom and it looks good enought for now. If any one knows better, he's still welcome.