Gap between div tags in IE, Opera & Chrome but not FF

I am using div tags to create a form in a box on the right side of this page:
www.freshbusiness.net/index2.htm

In IE I get spaces between the top, middle and bottom div elements and in Opera & Chrome I get spaces between the middle and bottom div elements, but displays fine in FF.

The div tags are all in one cell of a table (but that should not matter?)

I have searched for the reason, so far have made sure no margin or padding and I have removed white space in code. Totally stuck!!! Desperate for help!

Thanks
<td valign="top"><div id="newsletter_top"></div><form method="post" action="http://oi.vresp.com?fid=13402edf55" target="vr_optin_popup" onsubmit="window.open( 'http://www.verticalresponse.com', 'vr_optin_popup', 'scrollbars=yes,width=600,height=450' ); return true;" ><div style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; width: 210px; padding-left: 20px; padding-right: 10px; overflow: hidden; background-image: url(images/right_box_mid.gif); ; display: block;"><strong><span style="color: #333333;">Sign up today!</span></strong><p style="text-align: right; margin-top: 0px; margin-bottom: 0px;"><span style="color: #f00;">* </span><span style="color: #666666">required</span></p><label style="color: #666666;">First Name:</label><span style="color: #f00">* </span><br/><input name="first_name" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/><br/><label style="color: #666666;">Last Name:</label><span style="color: #f00">* </span><br/><input name="last_name" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/><br/><label style="color: #666666;">Email Address:</label><span style="color: #f00">* </span><br/><input name="email_address" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/><br/><label style="color: #666666;">Work Phone:</label><br/><input name="work_phone" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/><br/><input type="submit" value="Join Now" style="margin-top: 5px; border: 1px solid #999; padding: 3px;"/><br/></div></form><div id="right_box_bot"></div></p></td>
 
Here is the CSS:
 
#newsletter_top {
	width:240px;
	font-family: Arial, Helvetica, sans-serif;
	height: 46px;
	overflow: hidden;
	background-image: url(images/newsletter.gif);
	background-repeat: no-repeat;
	font-size: 0px;
	display: block;
	vertical-align: bottom;
	margin: 0;
	padding: 0;
}
 
#right_box_bot {
	width:240px;
	background:transparent url(images/right_box_bot.gif);
	height: 12px;
	overflow: hidden;
	display: block;
	font-size: 0px;
	margin: 0;
	padding: 0;
}

Open in new window

spbs17Asked:
Who is Participating?
 
colinspursConnect With a Mentor Commented:
Hi,

In your form try

<form style="margin: 0; padding: 0;"  method="post" etc...
           =======================

Col
0
 
eszaqCommented:
Try to add to  both - your form and DIV inside form that contains all the form-fields:
margin-top:0; margin-bottom:0;

But, I got to say, the code is somewhat messy. Too much of inline styles. Any good reason for that?
0
 
spbs17Author Commented:
Can't thank you enough, I was really sweating over this!
0
 
spbs17Author Commented:
Thanks to you both. Problem solved!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.