IE6 - too much spacing appearing above h3, how do I get rid of it?

Question

Example: http://bit.ly/dfjvmT

If you take a look at that URL, you will see an <h3> labeled "Send Us Your Resume". Problem is -- in IE6, it has too much space at the top. It's supposed to be margin-top of 16px, but in IE6, it appears more like 24-30px.

I have a reset.css file which has zeroed all margins and paddings, so it's not that.

Just checked, both CSS and XHTML are valid.

And I notice this spacing error only appears when I put a <div> before this <h3>. Currently, I have <div class="top"></div> which appears before this <h3>. That part takes care of rounded corners for the container. When I remove that <div>, the spacing finally matches in both IE6 and Firefox.

Of course, I need to use that <div> for rounded corners. So I'm wondering, what exactly is causing this problem, and is there a way to fix it?

Thanks

Edit: Solution found. I had to add overflow:hidden to the css of the <div> with rounded corners.

Answer 1

It's all right here:

#send-resume .top, #send-resume .bottom {
    background: url('../_images/bg-form-top.gif') no-repeat;
    width: 351px;
    height: 3px;
    overflow: hidden;
}

Most old browsers incorporate the font-height into the 'automated' height. The font-height by default is like 12 px so the height of the division will automatically be at least 12px high, or whatever your default font-height is for the page. Try setting font-size: 1px; in your class and see if it gets rid of your height problem.

Answer 2

IE6 doubles the margin on floated elements. you can fix this by using an IE6 specific CSS

<!--[if IE 6]><link href="ie6.css" rel="stylesheet" type="text/css" /><![endif]-->

and make the margin-top exactly half (so 8px) of the value in your original CSS.