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

Posted on 2008-11-13
Last Modified: 2012-05-05
I am using div tags to create a form in a box on the right side of this page:

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!

<td valign="top"><div id="newsletter_top"></div><form method="post" action="" target="vr_optin_popup" onsubmit=" '', '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 {


	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 {


	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

Question by:spbs17
    LVL 8

    Expert Comment

    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?
    LVL 3

    Accepted Solution


    In your form try

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


    Author Closing Comment

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

    Author Comment

    Thanks to you both. Problem solved!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now