Member Avatar for 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 -

what it should look like -

what it looks like on IE 7 -

any ideas on a solution?

Cheers
Lance Craig

  • 4 Contributors
  • 4 Replies
  • 120 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

posted a classic IE rendering mismatch: the newsletter box sits a few pixels away from the preceding menu in IE7 even though it looks fine in Firefox. The usual causes are browser default margins on the menu/heading elements, and IE-specific margin/hasLayout behaviors — both can make two stacked blocks appear separated only in IE.

Quick diagnostic steps: use IE/Edge dev tools to inspect computed margins for the module output (UL, Hx, P, etc.). Temporarily give the parent and children colored outlines to see which element actually supplies the gap. As asked, a minimal reproducible snippet of the module HTML helps isolate whether the menu itself carries a bottom margin or if the newsletter has an unexpected top margin.

Immediate, low-risk fixes to try (no rewrite required):

/* reset typical block margins inside the sidebar */
#left_nav ul,
#left_nav li,
#left_nav h2,
#left_nav h3 {
  margin: 0;
  padding: 0;
}

/* trigger hasLayout in IE6/7 so margins behave predictably */
#left_nav {
  zoom: 1;
}

Notes on other replies: is right that margins matter, but cellpadding applies only to tables. ’s nested-wrapper approach is valid when you need separate control of width vs outer spacing, but zeroing problematic default margins (or adding a tiny parent padding/border) is usually simpler.

Final checklist: confirm a standards DOCTYPE (avoids quirks rendering), validate the module HTML for stray paragraphs or block-level elements with bottom margins, and avoid negative-margin hacks unless they are the last resort. If the menu module is third-party output, add the margin reset scoped to the sidebar to avoid breaking other layouts.

Recommended Answers

All 4 Replies

Member Avatar for tiger86

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

Member Avatar for pantsonnos

Sorry

Heres the source

HTML
Just the bit with the problem

<div id="left_nav">{module_menu,231384}
    <div id="newsletter">
  <form action="" method="post" name="enquiry" id="enquiry">
    <input name="recipient" type="hidden" id="recipient" value="lance@quadtech.com.au">
    <input name="subject" type="hidden" id="subject" value="Life Made Easy - Web Enquiry Form">
    <input name="redirect" type="hidden" id="redirect" value="">
    <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">
Member Avatar for 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

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.