Gaps between spans

[MorganA]

First time poster :)

First of all allow me to apologize I'm using a program that automatically generates e-mail reminders to be sent out to users and translates all of my HTML to old-school HTML so I realize these things are out of date... which may be part of my problem.

I've got the classic problem (which I know I've solved a million times before) of having a gap between my header span and my content span in IE. I know to zero out my padding and margins ... I think I've zeroed out everything possible. Would divs be better possibly?

Screenshot:
http://www.1stinternet.com/emails/sample.jpg

Code:
<STYLE>

body{
background-color: #ccc;
text-align: center;
padding: 0px;
margin: 0px;
}

span#wrapper{
width: 500px;
min-width: 500px;
height: 500px;
background-color #0f0;
margin: 25px auto 0 auto;
text-align: justify;
display: block;
padding: 0px;
position: relative;
}

span#content{
position: absolute;
background-color: #fff;
background-image: url('http://www.1stinternet.com/emails/content.jpg');
background-repeat: repeat-y;
width: 500px;
min-width: 500px;
display: block;
padding: 0px;
margin: 0px;
top: 80px;

}
span#header{
position: relative;
width: 500px;
display: block;
padding: 0px;
margin: 0px;
}

span#footer{
background-image: url('http://www.1stinternet.com/emails/wellbottom.jpg')
background-repeat: no-repeat;
position: relative;
width: 500px;
display: block;
padding: 0px;
margin: 0px;
}
p{
padding-left: 10px;
padding-right: 10px;
font-family: verdana, arial, sans-serif;
}
h1{
padding-left: 10px;
padding-right: 10px;
font-family: verdana, arial, sans-serif;
font-size: 11pt;
line-height: 15pt;
}
p#center{
text-align: center;
}

p#right{
text-align: right;
}

img{
padding: 0px;
margin: 0px;
border: 0px;
}


</STYLE>
<SPAN id=wrapper>
<SPAN id=header>
<A href="http://www.wellnetix.com"><IMG alt=Wellnetix src="http://www.1stinternet.com/emails/wellheader.jpg" target="_blank"></A> </IMG></SPAN>
<SPAN id=content>
<H1>We have received your order for the following item(s);</H1>
<P>##note##
<TABLE id=AutoNumber1 style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=4 border=1>
<TBODY>
<TR>
<TD width="100%">##order_items##<BR>##order_items_summary##</TD></TR></TBODY></TABLE>
<P>
<P></P>
<P>To be sent to:<BR>##order_ship_address##</P>
<P>Thank you for your order!<BR>##company_name##<BR>##company_address##<BR>##company_email##<BR>##company_url##</P><BR></SPAN>
<SPAN id=footer><img src="http://www.1stinternet.com/emails/wellbottom.jpg"></img></SPAN>
</SPAN>

[MorganA]

Yeah, nevermind I figured it out.

[anna55]

Yeah, nevermind I figured it out.

But why will you keep it as your secret?

[MorganA]

I used an absolute position one of my spans :( Probably not the best solution.

[anna55]

I used an absolute position one of my spans :( Probably not the best solution.

Yes, without that position and a
margin-top: -10px;
instead of the top element would do it.

[MorganA]

Ahh, a negative margin! Nice!

[anna55]

Ahh, a negative margin! Nice!

You like it?! :)

But there are more good news for you: no position with span#content as I said and add here
img{
padding: 0px;
margin: 0px;
border: 0px;
display: block;
}


and give H1 layout:
H1 {
margin:0;
padding:10px;
}

Hope you will not miss the gap.

[MorganA]

My css does not validate with negative margins... :( Is this standard css?

[anna55]

Yes negative margin ist standard css. But I gave you a second example in post 7 without negative margins.

Here (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbluerobot.com%2Fweb%2Fcss%2Fcenter2.html) you see a nevative margin example (http://bluerobot.com/web/css/center2.html) that validates.

I don't know what markup you tried to validate. The one from your first post got some not standard code in. So certainly it would fail validation.

[MorganA]

Well, I was trying my new trick on another document .. looks like its a doc type problem then.