Small gap above my <h3> and no top border

[Fotiman]

IE is really starting to piss me off.

I have the following:

<div id="block1">
<div class="wrapper">
<h3>Foo</h3>
<div>...</div>
</div>
</div>

I have a background image applied to the <h3> aligned on the top. This *should* be the top edge of the .wrapper, which should be the top edge of #block1. But instead I see a small bit of the background color of wrapper showing through on the top. If I remove the wrapper div, I still see the block1 background color showing.

My h3 has margin: 0. I tried giving it a border-top: 1px solid black, and that doesn't show up. But if I make it 2px, I can see 1px of the border.

The fix I'm using at the moment is to assign the following style to my h3:

margin-top: -1px;

And hide this from other browsers. It also has position: relative; to fix other IE bugs (grrrr), which is also hidden from other browsers.

This has to be a common bug, so what's the best fix? Surely what I'm doing can't be the best solution.

[jessejump]

What other styles are there?
I don't see any of the problems you describe.
Also, try a full doctype with url.

[createErrorMsg]

Try zeroing out all margin and padding (if you haven't already)...

*{margin:0;padding;0}

IE recognizes an element higher in the document tree than the HTML element which no other browsers do. It doesn't have any default margin or padding, but it occasionally causes odd collapsing margin issues.

cEM

[Fotiman]

I am using a full doctype with URL. And I tried adding that rule to zero all margins and padding, but it didn't work either. :(

[Fotiman]

Note, if I set a height: .1% on the h3 (for IE only), it also works. Another hasLayout bug I suppose. >:[