I think you should fiddle with your DOCTYPE as this usually gets IE going in the right direction
Scott Evernden
2009-10-07 17:49:01
+1
A:
trouble is, this is a bookmarklet :-(
e-satis
2009-10-07 17:50:01
A:
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.
Justin Johnson
2009-10-07 17:58:56
it's more of the contrary, there is a gap because the element is too big
e-satis
2009-10-07 18:03:45
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.
e-satis
2009-10-09 19:15:21
A:
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.
e-satis
2009-10-07 19:01:19
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
2009-10-07 20:56:56
+1
A:
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.
Slevin
2009-10-09 13:30:52
I set the margin, padding and height to 0px. But why border-collapse:collapse; ?
e-satis
2009-10-09 15:11:13
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
2009-10-12 14:00:44
+2
A:
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.
David Murdoch
2009-10-09 16:00:08