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.

You might get better support on the http://doctype.com website. — Bernhard Hofmann, Oct 08 '09 at 07:00

score 2 · Accepted Answer · answered Oct 09 '09 at 16:00

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.

score 1 · Answer 2 · answered Oct 07 '09 at 17:49

1

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

answered Oct 07 '09 at 17:49

Scott Evernden

39,136
15
78
84

score 1 · Answer 3 · answered Oct 09 '09 at 13:30

1

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.

answered Oct 09 '09 at 13:30

Slevin

312
2
12

I set the margin, padding and height to 0px. But why border-collapse:collapse; ? – Bite code Oct 09 '09 at 15:11
After reading through your situation again, the border-collapse would not be applicable. That is best suited when doing tables and such and forces cells or elements to share borders. – Slevin Oct 12 '09 at 14:00

score 0 · Answer 4 · answered Oct 07 '09 at 17:58

0

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.

answered Oct 07 '09 at 17:58

Justin Johnson

30,978
7
65
89

it's more of the contrary, there is a gap because the element is too big – Bite code Oct 07 '09 at 18:03
Yeah, I was going to do that but ended up setting the top border instead of the bottom, which prevent me from writting a IE specific code and let the illusion that it works as expected. Hacky, but pragmatic I guess. – Bite code Oct 09 '09 at 19:15
It's IE, don't feel bad about it being hacky ;) – Justin Johnson Oct 10 '09 at 03:12

score 0 · Answer 5 · answered Oct 07 '09 at 19:01

0

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.

answered Oct 07 '09 at 19:01

Bite code

578,959
113
301
329

It's most likely a margin-collapsing problem. Margin collapsing — in particular the way margins can jump between nested elements — is confusing enough in the first place, even without IE's bugs. And IE-Quirks-Mode's margin bugs are spectacularly bad. – bobince Oct 07 '09 at 20:56

Pixel gap in ie

5 Answers5