whitespace between divs in IE not in FF

[pantsonnos]

Hi all

working on a design and IE 7 is giving me grief (no surprises there)

its making a white space gap between the side navigation and the newsletter box, whereas they should touch not have a white gap.

URL - http://lifemadeeasy.businesscatalyst.com/

what it should look like - http://i29.tinypic.com/2w340v7.jpg

what it looks like on IE 7 - http://i31.tinypic.com/e715l1.jpg

any ideas on a solution?

Cheers
Lance Craig

[tiger86]

Could you please supply us with the source code that will make things a lot easier THANKS!

[pantsonnos]

Sorry

Heres the source

HTML
Just the bit with the problem

<div id="left_nav">{module_menu,231384}
    <div id="newsletter">
  <form action="http://mailgate.t185.net/processunregistered.aspx" method="post" name="enquiry" id="enquiry">
    <input name="recipient" type="hidden" id="recipient" value="[e-mail]">
    <input name="subject" type="hidden" id="subject" value="Life Made Easy - Web Enquiry Form">
    <input name="redirect" type="hidden" id="redirect" value="http://lifemadeeasy.businesscatalyst.com/confirmation">
    <img src="images/layout/newletter_top_19.gif" alt="Subscribe to Our Newsletter" width="192" height="45"><br>
    <div id="newsletter_inner">
        Full Name<br>
        <input type="text" name="Full Name" id="Full Name">
	  <br>
	  Email<br>
        <input type="text" name="Email" id="Email">
        <br>
        <span><input name="Subscribe" type="submit" class="subcribe_btn" id="Subscribe" onClick="MM_validateForm('Full Name','','R','Email','','RisEmail');return document.MM_returnValue" value="Subscribe">
        </span>
    </div><!-- close newsletter inner -->
    </form>
    </div><!-- close newsletter -->
  </div><!--close left_nav -->

CSS

@charset "utf-8";
body {
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-color: #543b4d;
}
#container {
	margin: 0px auto;
	width: 999px;
	background-image: url(../images/layout/bg_stretch.jpg);
	background-repeat: repeat-y;
	background-position: center;
}


/* CSS Document */

#banner {
	background-image: url(../images/layout/banner_02.jpg);
	background-position: center bottom;
	height: 250px;
	width: 999px;
	background-repeat: no-repeat;
}
#left_nav {
	float: left;
	width: 192px;
	margin-left: 10px;
}
#right_content {
	width: 727px;
	float: left;
	text-align: left;
	padding: 20px 30px 10px;
}
#footer {
	clear: both;
	height: 18px;
	width: 979px;
	background-color: #dfd4ef;
	margin-right: 10px;
	margin-left: 10px;
}
.footer_txt {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}
#newsletter {
	background-color: #e1c5e9;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #967487;
	text-align: left;
	margin: 0px;
	padding: 0px;
}
#newsletter_inner {
	padding-left: 14px;
}
#copyright {
	width: 999px;
}
.normal {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #464646;
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #543B4D;
	margin: 0px;
	padding: 0px;
}
h2 {
	font-size: 14px;
	color: #812358;
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.subcribe_btn {
	background-image: url(../images/layout/submit_button.jpg);
	font-size: 10px;
	color: #967487;
	font-family: Arial, Helvetica, sans-serif;
	width: 63px;
	margin-top: 5px;
	margin-left: 81px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-bottom: 13px;
}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #543B4D;
}

the space is appearing between here i think...

<div id="left_nav">{module_menu,231384}
SPACE APPEARS HERE IN IE
    <div id="newsletter">

[sreein1986]

Hey Friend,
you gave cellpadding, margins give a lot in IExplore it's these are taken according cellpading and margin if you give padding = 3 and margin = 2 that div tag taken total 5 pixels so give margin and padding appropriately

[MidiMagic]

Your problem is that the margins are inside the widths in IE, but outside the width in other browsers.

IE wrongly puts surrounding styles (margin, border, padding) INSIDE the size styles (width, height). Other browsers put the surrounding styles OUTSIDE the defined size styles.

The trick is to use two nested tags, one for the width, and the other for the margin. Make a different style for each one.