Added margin in IE/win

why?

[Bonusbana]

Could anyone tell me why IE/win adds a 10px black margin under the #bottom div in this document? Standard supporting browser displays the page correct.

Its no big deal, I just want to find out why.

Here is the CSS:

/* --- DIVS --- */
#wrap {
position: relative;
margin: 30px auto;
background: transparent;
width: 710px;
padding: 0;
}
#black {
position: relative;
background: #000;
padding: 5px;
margin: 0;
width: 710px; /* box model hack */
voice-family: "\"}\""; 
voice-family:inherit;
width: 700px;
}
/* Be nice to opera */
html>body #black {
 width: 700px;
} 
#top {
position: relative;
background: transparent url("../img/top.jpg") no-repeat;
height: 130px;
padding: 0;
margin: 0 0 5px 0;
}
#subtop {
position: relative;
background: transparent url("../img/topgreen.gif") no-repeat top right;
height: 25px;
padding: 0;
margin: 0;
}
#main {
position: relative;
background: #edb url("../img/bg_body.jpg") repeat-y;
width: 700px;
/* padding hack for mozilla */
padding: 0;
padding-top: 1px;
padding-bottom: 1px;
}
#maincontent {
float: left;
margin: 0;
padding: 30px 0 30px 30px;
width: 470px; /* box model hack */
voice-family: "\"}\""; 
voice-family:inherit;
width: 440px; 
}
html>#maincontent {
width: 440px;
}
#sidebar {
padding: 0;
margin: 0 0 10px 520px;
background: transparent;
width: 160px;
/* compensates for IE Win bungling */
height: 100%;
}
#bottom {
margin: 0;
padding: 0;
position: relative;
height: 10px;
display: block;
background: transparent url("../img/bg_bottom.jpg") no-repeat;
}
#footer {
margin: 0 0 0 0;
padding: 10px 0 20px 0;
position: relative;
background: transparent;
text-align: center;
}

HTML:

<div id="wrap">
 <div id="black">
 <div id="top"></div>
 <div id="subtop"></div>
 <div id="main">
 <div id="maincontent"></div>
 <div id="sidebar"></div>
 <div style="clear: both;"></div>
 </div>
 <div id="bottom"></div>
 </div>
 <div id="footer"></div>
</div>

[Reflection]

My guess is its your "black" div that is showing up and not a margin.

BTW you dont need to specify position:relative; on every div.

[Bonusbana]

Yes, but why is the "black" div showing up?

[mipapage]

A few things:

1. The 'black div' is #bottom. IE is giving it more height than, in my case, firebird. I'm not sure why, but it seems that 10px high in one is different than in the other!

   In fact, I measured a screenshot and IE seems to have it set at 19px.
   

2. You specify 'display:block' in the declarations for #bottom; there is no need for this as a div is a block level element.
   
3. By adding this "body{text-align:center}" to your styles and this "text-align:left" to #wrap your layout will center in IE, just like it does for me now in Firebird.
   

Now you know what it is, perhaps this 'effect' isn't relevant once you start filling with content?

I did these little tests using XHTML Strict doctype with no XML prologue...

[Bonusbana]

The 'black div' is #bottom. IE is giving it more height than, in my case, firebird. I'm not sure why, but it seems that 10px high in one is different than in the other!

I dont quite understand, sorry. The #bottom div is positioned in the #black div, which is positioned in the #wrap div. Do you mean that the #bottom div is stretching to 19px, making the #black div and the #wrap div stretch_?

You specify 'display:block' in the declarations for #bottom; there is no need for this as a div is a block level element.

I know i dont need to make the #bottom div a block-level element, it was just a blind shot to see how IE reacted. Of course it made no difference...

By adding this "body{text-align:center}" to your styles and this "text-align:left" to #wrap your layout will center in IE, just like it does for me now in Firebird.

The layout does center in IE, at least the versions I tested (IE6/win and IE5/mac), so that is not an issue here.

Now you know what it is, perhaps this 'effect' isn't relevant once you start filling with content?

The effect isnt that relevant, but its still there no matter how much content I put in. I just wanted to know if somebody had a explanation to why the div is stretching in IE/win___

Thanx for your answer and efforts.

[mipapage]

1. Yes.
   
2. I thought so ;-]
   
3. It is an issue if you care about IE5 or 5.5 for win!
   
4. It's weird, I don't. I would imagine someone will pipe up with this, 'cause its a weird one that someone must have seen before... I guess "bg_bottom.jpg" is ten pixels high and throws this off in IE then?

[SuzyUK]

Bonusbana.. if you add different background colors (temporarily) to all the parts of this , red, yellow, lime etc.. then you'll be able to see exactly which div is "stretching"..

in this case it is actually the #bottom div as Mipapage says, which is causing this..

#bottom {
margin: 0;
padding: 0;
position: relative;
height: 10px;
display: block;
background: transparent url("../img/bg_bottom.jpg") no-repeat;
}

You've specified a height of 10px on it, IE however defaults to height 16px (line height 19px) and in order to override that you need to specify a small font size and line height too..

so font-size: 1px; line-height: 1px; added to this should bring IE back in line with the others..

Suzy

[Bonusbana]

Suzy to the rescue, thanx a LOT. Yet another hopeless IE issue solved.

Mipapage: I messaged you with a request to check the real url and see if the site does center in IE5/5.5 as I have no possibility to test it on my own.

Thanx alot for all your help

[grahamstewart]

check the real url and see if the site does center in IE5/5.5 as I have no possibility to test it on my own.

Read How to: Install multiple versions of IE on your PC [webmasterworld.com] by DrDoc.

[mipapage]

I knew you would nail this one, SuzyUK!

Good advice grahamstewart, tho I'm glad he e-mailed me 'cause it's a stunning piece of work!

[edited by: mipapage at 10:47 am (utc) on Mar. 16, 2004]

[Bonusbana]

I use a mac and a Virtual PC, so new installations and such on the PC is a pain. But thanx for the link, Ill check it out.