extra whitespace on top of image in form in IE

Question

I have a test form with whitespace above the top image that shouldn't be there... The image is a background-image attached to the h1 tag. It looks like there's space between the .wufoo div, and the #main_form form.

Css:

<link rel="stylesheet" href="https://system.netsuite.com/c.659197/oboe/integrate/wufoo/css/structure.css" type="text/css" />
<link rel="stylesheet" href="https://system.netsuite.com/c.659197/oboe/integrate/wufoo/css/form.css" type="text/css" />
<link rel="stylesheet" href="https://system.netsuite.com/c.659197/oboe/integrate/wufoo/css/theme.css" type="text/css" />
<style type="text/css">
* {padding:0;margin:0;}
.wufoo{border:1px solid #444;margin:0;padding:0;}
.wufoo p{padding:3px;}
h1 {background:url("/oboe/header1.jpg") no-repeat -270px top;
cursor:pointer;height:164px;margin:auto;width:626px;}
h2{padding:3px; color:#444;}
.wufoo textarea.inputreq{width:355px;}
#main_form{padding:0;margin:0;}
</style>

HTML:

<div id="container">
<div class="wufoo">
<form id="main_form" name="main_form" method="POST" action="test.nl" onsubmit="return ( window.isinited &amp;&amp; window.isvalid &amp;&amp; save_record( true ) )" style="margin: 0pt;">
<h1>Earth Day Giveaway</h1>
<h2>Earth Day Giveaway</h2>
</form>
</div><!--end wufoo--> 
</div><!--container-->

Answer 1

An h1 element will have margins applied to it by default.

h1 { margin: 0px; }

or in your case if you're centering it (I don't know if that's what you're doing with margin auto) you could use this:

h1 { margin: 0px auto; }