Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1411
  • Last Modified:

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

0
spbs17
Asked:
spbs17
  • 2
1 Solution
 
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
 
colinspursCommented:
Hi,

In your form try

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

Col
0
 
spbs17Author Commented:
Can't thank you enough, I was really sweating over this!
0
 
spbs17Author Commented:
Thanks to you both. Problem solved!
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now