I'm using a fixed 3 column layout complete with a header and a footer. The header, left and right column, and footer all have background images in them. The left and right column's background images should align with the header's background image to form a fluid connected image from the header to the tops of the left and right columns.

In Firefox my layout displays fine.. in IE however there is a small gap between the header and the columns beneath it causing the images to be disconnected.

I don't know what is causing this. I've already tried messing around with padding/border values but nothing seems to help..

If anyone has an answer on this it would be very helpful..

Thanks!

CSS:

body {
    text-align:center;
    background: url("images/gradient.png");
    background-position:top;
    background-repeat:repeat-x;
    padding:0px;
    border:none;
    }
img {
    border:none;
}

#frame {
    width:800px;
    margin-right:auto;
    margin-left:auto;
    margin-top:0px;
    padding:0px;
    text-align:left;
    border:none;
    }
    
#leftFrame {
    width:155px;
    min-height:300px;
    padding:0px;
    float:left;
    background-image: url("images/eatbabies_layout_02.gif");
    background-position:top;
    background-repeat:no-repeat;
    }

#leftContent {
    width:155px;
    padding:0px;
    text-align:center;
    clear:both;
    float:left;
    
}

#rightContent {
    width:159px;
    padding:0px;
    text-align:center;
    clear:both;
    float:left;
    padding-top:4px;
}

#centerFrame {
    width:486px;
    min-width:486px;
    padding:0px;
    float:left;
    text-align:center;
    }

#rightFrame {
    width:159px;
    min-height:300px;
    padding:0px;
    float:left;
    background-image: url("images/eatbabies_layout_04.gif");
    background-position:top;
    background-repeat:no-repeat;
    }
    
#preHeader {
    width:800;
    min-width:800;
    padding:0px;
    text-align:center;
    vertical-align:top;
}

#headerFrame {
    width:800px;
    height:135px;
    padding:0px;
    background-image: url("images/eatbabies_layout_01.gif");
    background-position:top;
    background-repeat:no-repeat;
    text-align:center;
    vertical-align:top;
    border:none;
    }

#footerFrame {
    width:800px;
    height:155px;
    background-image: url("images/eatbabies_layout_07.gif");
    background-repeat:no-repeat;
    clear:both;    
    float:left;
}

#subFooter {
    width:800;
    min-width:800;
    clear:both;
    float:left;
}

#jSwift {
    width:88px;
    height:99px;
    position:absolute;
    top:34px;
    left:50%;
    margin-left:274px;
}

#storeBubble {
    width:136px;
    height:133px;
    position:relative;
    top:0px;
    left:4px;
}

#textBubble {
    width:127px;
    height:143px;
    position:relative;
    top:0px;
    left:12px;
    background-image: url("images/textBubble.png");
    background-repeat:no-repeat;
}

#textBubbleText {
    width:110px;
    height:114px;
    position:relative;
    top:18px;
    left:8px;
    font-size:12px;
    text-align:center;
    overflow:auto;
}

#flashTitle {
    text-align:center;
    width:500px;
    height:75px;
    clear:both;
    position:absolute;
    top:30px;
    left:50%;
    margin-left:-258px;
    border-style:solid;
    border-color:#000000;
    border-width:thick;
}

#logoBox {
    text-align:center;
    width:90px;
    height:90px;
    clear:both;
    position:absolute;
    top:28px;
    left:50%;
    margin-left:-378px;
}
    
p,h1,pre {
    margin:0px 10px 10px 10px;
    }
    
h1 {
    font-size:14px;
    padding-top:10px;
    }
    
#headerFrame h1 {
    font-size:14px;
    padding:10px;
    margin:0px;
    }

#rightFrame p { font-size:10px}

a.jSwiftRollover {
    display:block;
    width:88px;
    height:99px;
    background-image: url("images/jSwiftOff.png");
    background-repeat:no-repeat;
}
a.jSwiftRollover:hover {background-image: url("images/jSwiftOn.png");}

a.storeBubbleRollover {
    display:block;
    width:136px;
    height:133px;
    background-image: url("images/storeBubbleOff.png");
    background-repeat:no-repeat;
}
a.storeBubbleRollover:hover {background-image: url("images/storeBubbleOn.png");}

html:

<body bgcolor="#FFFFFF">

<div id="frame">
	<div id="preHeader">
    </div>
    <div id="headerFrame">
    	<div id="jSwift">
        <a class="jSwiftRollover" href="127.0.0.1"></a>
        </div>
        <div id="flashTitle">
        <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0','width','500','height','75','src','images/titlebar1','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images/titlebar1' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="75">
          <param name="movie" value="images/titlebar1.swf">
          <param name="quality" value="high">
          <embed src="images/titlebar1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="75"></embed>
          </object></noscript>
          </div>
          <div id="logoBox"><a href="home"><img src="images/spacer.gif" width="90" height="90"/></a></div>
    </div>
	<div id="leftFrame">
   	  <div id="storeBubble"><a class="storeBubbleRollover" href="127.0.0.1"></a></div>
        <div id="leftContent"></div>
    </div>
    <div id="centerFrame">
      <p>&nbsp;</p>
    </div>
    <div id="rightFrame">
   	  <div id="textBubble">
       	  <div id="textBubbleText">
   	      </div>
        </div>
        <div id="rightContent"></div>
  </div>
  <div id="footerFrame">
  </div>
  <div id="subFooter"></div>
</div>
</body>

I fixed it

Found some errors in the CSS using the validator: http://jigsaw.w3.org/css-validator/validator

There was a problem where i didnt add "px" after a number denoting pixels..

so... add the px