Link to home
Start Free TrialLog in
Avatar of spbs17
spbs17

asked on

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

Avatar of eszaq
eszaq
Flag of United States of America image

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?
ASKER CERTIFIED SOLUTION
Avatar of Colin Brazier
Colin Brazier
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of spbs17
spbs17

ASKER

Can't thank you enough, I was really sweating over this!
Avatar of spbs17

ASKER

Thanks to you both. Problem solved!