Why does IE/Win 5.5 ignore my div's bottom margin?

Mac Safari and IE/Mac don't ignore the margin.

[ChrisJ]

I have an image overlaying an orange bar. But IE/Win is ignoring the orange bar's bottom margin. So the beginning of the text after it is getting covered up by the image.

It looks fine in IE/Mac, but IE/Win 5.5 gives me the problem. Suzy suggested the idea of positioning the image absolutely, which I thought solved most of the problem.

Here's the CSS and 2 lines of HTML.

Thanks a lot in advance for any advice or help,
CHRIS

.imageunderlay {
position:relative;
background-color:white;
height:35px; /* white space */
border-width:0px 0px 50px 0px; /* then orange bar */
border-style:solid;
border-color:#ffcc33;
margin:0px 0px 25px 0px; /* then should be more white space /*
}

.imageunderlay img {
position:absolute; /* image is taken out of the flow */
border:2px solid black;
margin:0px;
}

<div class="imageunderlay">
<img src="myimage.jpg" height="100" />
</div>

[Span]

There's a typo at the end of this line:

margin:0px 0px 25px 0px; /* then should be more white space /*

You have /* ... /* instead of /* ... */

Added: Not sure if correcting the typo will solve your problem. If the text following the image still is covered by the image, try setting a padding-top on the element that text is in.

[ChrisJ]

Thanks for noticing that. It's not the problem, though. I added those in afterwards in the message post.

[SuzyUK]

ChrisJ

oops I should've said in the last post, I take you are using a strict doctype (using IE in Strict Mode).. the problem is not the bottom margin it's the height of the Box. IE in Quirks mode is getting the height of the whole div wrong.. The IE Box Model :(

it's easily enough worked around, if you use a Box Model Hack [css-discuss.incutio.com] you need to make the height of the box 85px (35px + 50px border) for win/IE5.x.

If you are using a strict doctype then my choice would be to use the Modified SBMH (Simplified Box Model Hack)

.imageunderlay {
position:relative;
color: #fff;
height: 35px; /* white space */
border-width: 0 0 50px 0; /* the orange bar */
border-style:solid;
border-color: #ffcc33;
margin:0px 0px 25px 0px; /* then should be more white space */
}

* html .imageunderlay {
height: 85px; /* for IE5.x */
he\ight: 35px; /* for IE6 and Mac */
}

.imageunderlay img {
position:absolute; /* image is taken out of the flow */
border:2px solid black;
margin:0px;
}

Note: this will not work for IE6 in Quirks mode as it will still read the 35px height but would need the 85px height

Suzy

[ChrisJ]

Suzy, you're totally right. Thanks so much!
I didn't realize the box model messes up on the borders, too -- not just on the padding.
Later,
CHRIS