small whitespace in between two divs in IE 6 and 7

I've seen some topics about this but nothing seems to work for me here. Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<body>

<div class="container">

<div class="header"> </div>

<div class="navBarMain">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li class="Home"><a href="#">Home</a></li>
<li class="AboutUs"><a href="#">About Us</a></li>
<li class="Products"><a class="MenuBarItemSubmenu" href="#">Products</a>
<ul>
<li><a class="MenuBarItemSubmenu2" href="#">Fireplaces</a>
<ul>
<li><a class="MenuBarItemSubmenu2" href="#">Direct Vent Gas</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Vent Free Gas</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Wood</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Electric</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu2" href="#">Stoves</a>
<ul>
<li><a class="MenuBarItemSubmenu2" href="#">Direct Vent Gas</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Vent Free Gas</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Wood</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Pellet</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Corn</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Coal</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu2" href="#">Inserts</a>
<ul>
<li><a class="MenuBarItemSubmenu2" href="#">Gas</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Wood</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Pellet</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu2" href="#">Other</a>
<ul>
<li><a class="MenuBarItemSubmenu2" href="#">Gas Log Sets</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Outdoor Products</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Mantels and Cabinetry</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Marble and Granite</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Custom Doors</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Accessories</a></li>
</ul>
</li>
</ul>
</li>
<li class="Builders"><a href="#">Builders</a></li>
<li class="Locations"><a href="#">Locations</a></li>
<li class="ContactUs"><a href="#">Contact Us</a></li>
<li class="Links"><a href="#">Links</a></li>
<li class="Service"><a class="MenuBarItemSubmenu" href="#">Service</a>
<ul>
<li><a class="MenuBarItemSubmenu2" href="#">Request Service</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Owner's Manuals</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Warranty Information</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Light Your Pilot Light</a></li>
</ul>
</li>
<li class="Specials"><a href="#">Specials</a></li>
</ul></div>

</div>

</html>

And here is the css:

Spry Menu Bar CSS:

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/*******************************************************************************

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [therealcrisp.xs4all.nl...] */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #869d98;
border-bottom-color: #869d98;
border-left-color: #869d98;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #9eb8b2;
color: #006666;
font-family: 'Lucida Grande', 'Lucida Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
background-image: url(../images/bg_main_nav_bar.gif);
background-repeat: repeat-x;
text-align: center;
padding-top: 11px;
padding-bottom: 11px;

}

ul.MenuBarHorizontal a.MenuBarItemSubmenu2
{
font-size: 12px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #869d98;
width: auto;
padding-bottom: 0.63em;
height: auto;
padding-top: 0.63em;
padding-right: 0.69em;
padding-left: 0.94em;
text-align: left;
background-color: #9eb8b2;
background-image: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
color: #FFF;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
ul.MenuBarHorizontal li.Home {
width: 85px;
}
ul.MenuBarHorizontal li.AboutUs {
width: 107px;
}
ul.MenuBarHorizontal li.Products {
width: 105px;
}
ul.MenuBarHorizontal li.Builders {
width: 97px;
}
ul.MenuBarHorizontal li.Locations {
width: 110px;
}
ul.MenuBarHorizontal li.ContactUs {
width: 120px;
}
ul.MenuBarHorizontal li.Links {
width: 79px;
}
ul.MenuBarHorizontal li.Service {
width: 95px;
}
ul.MenuBarHorizontal li.Specials {
width: 102px;
}

Regular CSS:

@charset "utf-8";
html,body,form,fieldset {
font:100%/120% Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}

h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,address {
margin:1em 0;
padding:0;
}

li,dd,blockquote {
margin-left:1em;
}

form label {
cursor:pointer;
}

fieldset {
border:none;
}

input,select,textarea {
font-size:100%;
font-family:inherit;
}

body {
background-color:#584C3D;
color:#756959;
font-family:'Lucida Grande', 'Lucida Sans', Arial, Helvetica, sans-serif;
min-width:900px;
text-align:center;
margin:0;
}

.container {
width:900px;
border:0;
position:relative;
text-align:left;
margin:0 auto;
padding:0;
}

.header {
position:relative;
display:inline;
float:left;
height:100px;
width:900px;
}

.logo {
position:relative;
float:left;
display:inline;
width:260px;
height:70px;
margin:20px 0 10px 30px;
}

.addresses {
position:relative;
float:right;
display:inline;
width:353px;
height:61px;
background-image:url(../images/sub_addresses.gif);
margin:25px 29px 0 0;
}

.navBarMain {
position:relative;
float:left;
display:inline;
width:900px;
height:41px;
}

.mainArea/*-- MAIN AREA --*/ {
float:left;
position:relative;
display:inline;
width:900px;
background-color:#FFF7DA;
margin:0;
padding:30px 0;
}

.homeTop/*-- HOME PAGE --*/ {
position:relative;
float:left;
display:inline;
width:840px;
border-bottom:1px solid #E4D3A5;
margin:0 30px 30px;
padding:0 0 30px;
}

.homeFlash {
position:relative;
float:left;
display:inline;
width:550px;
height:280px;
margin:0 30px 0 0;
}

.news {
position:relative;
float:left;
display:inline;
width:260px;
margin:0;
}

.news h1 {
text-indent:-9000px;
line-height:0.5em;
margin:0;
padding:0;
}

.news p {
font-size:12px;
color:#756959;
line-height:1.6em;
}

.news img {
border:0;
margin:10px 0 0;
}

.homeBottomLeft {
position:relative;
float:left;
display:inline;
width:260px;
margin:0 30px;
padding:0;
}

.homeBottomMiddle {
position:relative;
float:left;
display:inline;
width:260px;
margin:0 30px 0 0;
padding:0;
}

.homeBottomRight {
position:relative;
float:left;
display:inline;
width:260px;
margin:0;
padding:0;
}

.sidePicture {
position:relative;
float:left;
display:inline;
width:260px;
margin:0 0 10px;
padding:0 0 10px;
}

.sideContactUsHome {
position:relative;
float:left;
display:inline;
width:260px;
background-image:url(../images/bg_contact_us.gif);
background-repeat:no-repeat;
background-position:right bottom;
border-bottom:1px solid #E4D3A5;
margin:0 0 25px;
padding:0 0 20px;
}

.sideContactUs {
position:relative;
float:left;
display:inline;
width:260px;
background-image:url(../images/bg_contact_us.gif);
background-repeat:no-repeat;
background-position:right bottom;
margin:0 0 25px;
padding:0 0 20px;
}

.sideCurrentSpecials {
position:relative;
float:left;
display:inline;
width:260px;
background-image:url(../images/bg_current_specials.gif);
background-repeat:no-repeat;
background-position:right bottom;
padding:0 0 15px;
}

.sideCustomerService {
position:relative;
float:left;
display:inline;
width:260px;
background-image:url(../images/bg_customer_service.gif);
background-repeat:no-repeat;
background-position:right bottom;
padding:0 0 15px;
}

.sideGoGreen {
position:relative;
float:left;
display:inline;
width:260px;
margin:0 0 25px;
padding:0 0 20px;
}

.sideProductNav a {
font-size:12px;
color:#756959;
line-height:1.6em;
margin:5px;
}

.mainColumn/*-- CONTENT PAGE --*/ {
position:relative;
display:inline;
float:left;
width:550px;
margin:0 30px;
}

.mainColumn h1 {
text-indent:-9000px;
line-height:1.1em;
margin:0 0 0.2em;
padding:0;
}

.mainColumn h3 {
font-size:14px;
font-variant:small-caps;
line-height:1.6em;
color:#584C3D;
}

.mainColumn h5 {
font-size:12px;
font-weight:700;
color:#5E4D35;
line-height:1.6em;
}

.mainColumn form {
margin:20px 0;
padding:0;
}

.mainColumn legend {
font-size:13px;
color:#333;
}

.mainColumn label {
font-family:'Lucida Grande', 'Lucida Sans', Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:700;
color:#584C3D;
width:100px;
display:inline;
float:left;
margin:0 10px 0 0;
padding:2px 0 0;
}

.rightColumn {
position:relative;
display:inline;
float:left;
width:260px;
margin:30px 0 0;
}

.product a:hover {
color:#584C3D;
text-decoration:underline;
}

.product img {
border:0;
float:left;
margin:0 10px 0 0;
}

.product table img {
border:1px solid #E3D2A6;
background:#FFF;
float:none;
padding:5px;
}

.galleryMainColumn {
position:relative;
display:inline;
float:left;
width:550px;
}

.galleryRow {
position:relative;
float:left;
display:inline;
width:550px;
margin:0 0 30px;
}

.galleryThumb {
position:relative;
float:left;
display:inline;
width:115px;
height:100px;
border:0;
margin:0 30px 0 0;
}

.galleryThumbEnd {
position:relative;
float:left;
display:inline;
width:115px;
height:100px;
border:0;
margin:0;
}

.image-left {
float:left;
border:1px solid #E3D2A6;
margin-right:20px;
background:#FFF;
padding:5px;
}

.image-right {
float:right;
margin-left:20px;
border:1px solid #E3D2A6;
background:#FFF;
padding:5px;
}

.relatedLinks p {
font-size:12px;
color:#756959;
line-height:1.6em;
margin:0 0 0.5em;
padding:0;
}

.formInches {
width:76px;
border:1px solid #E4D3A5;
background-color:#FFF;
font-size:13px;
font-family:'Lucida Grande', 'Lucida Sans', Arial, Helvetica, sans-serif;
padding:3px 5px;
}

.formButtonInches {
background-color:#066;
border:1px solid #066;
color:#FFF;
font-family:'Lucida Grande', 'Lucida Sans', Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
margin:10px 0 0;
padding:2px 3px;
}

.formContactText {
width:400px;
border:1px solid #E4D3A5;
background-color:#FFF;
font-size:13px;
font-family:'Lucida Grande', 'Lucida Sans', Arial, Helvetica, sans-serif;
padding:4px;
}

.formContactSelect {
width:400px;
background-color:#FFF;
font-size:13px;
font-family:'Lucida Grande', 'Lucida Sans', Arial, Helvetica, sans-serif;
}

.formStatement {
width:400px;
float:left;
display:inline;
position:relative;
margin:20px 0 0 110px;
}

.contactFormButtons {
position:relative;
float:right;
display:inline;
width:437px;
}

.formButton {
background-color:#066;
border:1px solid #066;
color:#FFF;
font-family:'Lucida Grande', 'Lucida Sans', Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:400;
margin:10px 0 0;
padding:4px 5px;
}

.footer {
position:relative;
float:left;
display:inline;
width:900px;
margin:0;
margin-right: -3px;
}

.footer p {
font-size:11px;
color:#E4D3A5;
display:inline;
margin:0 25px 0 30px;
}

.footer h4 {
float:right;
font-weight:400;
font-size:11px;
color:#E4D3A5;
display:inline;
margin:0 30px;
}

.footerLeft {
width:35%;
float:left;
padding:20px 0;
}

.footerCenter {
float:left;
width:40%;
text-align:center;
padding:18px 0 9px;
}

.footerCenter img {
border:0;
padding:0 10px;
}

.footerRight {
width:25%;
float:left;
padding:20px 0;
}

.footerLogos {
position:relative;
float:left;
display:inline;
width:900px;
text-align:center;
margin:0;
}

.footerLogos img {
padding-right:50px;
padding-left:50px;
border:0;
}

a:link,a:visited {
text-decoration:underline;
color:#066;
background-color:transparent;
}

a:hover,.navBarMain a:link,.navBarMain a:visited {
text-decoration:none;
color:#066;
background-color:transparent;
}

.navBarMain a:hover,.footer a:hover {
text-decoration:none;
color:#FFF;
background-color:transparent;
}

.homeBottomLeft h2,.homeBottomMiddle h2,.sideContactUsHome h2,.sideContactUs h2,.sideCurrentSpecials h2,.sidePiazzettaDesign h2,.sideCustomerService h2,.sideGoGreen h2,.product h2,.relatedLinks h2 {
text-indent:-9000px;
line-height:1.1em;
margin:0;
padding:0;
}

.homeBottomLeft h3,.homeBottomMiddle h3 {
font-size:12px;
line-height:1.6em;
color:#756959;
margin:5px 0 0;
}

.homeBottomLeft p,.homeBottomMiddle p,.sideContactUsHome p,.sideContactUs p,.sideCurrentSpecials p,.sidePiazzettaDesign p,.sideCustomerService p,.sideGoGreen p {
font-size:12px;
color:#756959;
line-height:1.6em;
margin:0;
padding:0;
}

.homeBottomLeft img,.homeBottomMiddle img {
border:0;
margin:0 0 5px;
}

.sidePicture img,.sidePiazzettaDesign img,.sideGoGreen img {
border:0;
}

.sideContactUsHome h3,.sideContactUs h3,.sideCurrentSpecials h3,.sidePiazzettaDesign h3,.sideCustomerService h3,.sideGoGreen h3,.relatedLinks h3 {
font-size:12px;
line-height:1.6em;
color:#756959;
margin:10px 0 0;
}

.sidePiazzettaDesign,.relatedLinks {
position:relative;
float:left;
display:inline;
width:260px;
border-bottom:1px solid #E4D3A5;
margin:0 0 25px;
padding:0 0 20px;
}

.mainColumn h4,.rightColumn h4 {
font-size:14px;
color:#5E4D35;
line-height:1.6em;
font-weight:400;
margin:0;
padding:0;
}

.mainColumn h6,.formStatement h6 {
font-size:10px;
font-weight:400;
color:#5E4D35;
line-height:1.6em;
}

.mainColumn p,.rightColumn p,.product p,table,.accessories-box p,table {
font-size:12px;
color:#756959;
line-height:1.6em;
padding:0;
}

.mainColumn ul,.rightColumn ul,.product ul,.relatedLinks ul {
line-height:1.4em;
list-style:none;
font-size:12px;
margin:0 10px 0 0;
padding:0;
}

.mainColumn li,.rightColumn li {
position:relative;
background-image:url(images/bullet.gif);
background-position:0 11px;
background-repeat:no-repeat;
padding:6px 0 4px 18px;
}

.product,.accessories-box {
position:relative;
display:inline;
float:left;
width:550px;
border-top:1px dashed #E4D3A5;
margin:0;
padding:20px 0;
}

.product a,.product a:visited,.accessories-box a {
color:#584C3D;
text-decoration:none;
}

.product h3,.accessories-box h3 {
font-size:14px;
font-variant:small-caps;
line-height:1.6em;
color:#584C3D;
margin:0 0 0.5em;
}

.product li,.relatedLinks li {
position:relative;
background-image:url(../images/bullet.gif);
background-position:0 11px;
background-repeat:no-repeat;
padding:6px 0 4px 18px;
}

.footer a:link,.footer a:visited {
text-decoration:underline;
color:#FFF;
background-color:transparent;
}

small whitespace in between two divs in IE 6 and 7

moogprodigy

Aarem

Marshall

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week