Okay so I’m working on a new layout for my website, and the code works wonderfully in both FF and Safari. But when I view it in IE there’s one problem (thank god just one!). The top border of my main content div is made with images, so I can have a fun overlap. But in IE the repeated background is at a different height than the top image, while in FF and Safari it’s fine.

This is what it’s supposed to look like:

This is what happens in IE 7: (not worrying about IE 6 right now)

And here’s my css:

HTML Code:

div.content{
          width:87%;
          text-align:center;
          margin-right:auto;
          margin-left:auto
          }
.header{
          background:url(repagebg.png) repeat-x center top;
          width:100%;
          position:relative;
          text-align:center;
          z-index:0;
          min-height:600px;
          }
.top{
          text-align:left;
          background:url(toprepeat.png) repeat-x bottom;
          width:100%;
          overflow:hidden;
          height:139px;
          margin:0;
          padding:0;
          }
.main{
          text-align:left;
          z-index:10;
          width:100%;
          min-height:400px;
          background:url(side.png);
          padding-bottom:5px;
          }
.nav{
          width:100%;
          height:25px;
          background:url(nav.png) repeat-x;
          text-align:left;
          z-index:1
          }
.topfloat{
          float:right;
          height:100%;
          width:5px;
          background:url(sideline.png) no-repeat;
          z-index:10;
          }


And HTML just for reference (top image is top.png):

HTML Code:

<div class="header">
                        <div class="content">
                                        <div class="top">
                                                  <div class="topfloat"></div>
                                        <img src="top.png" alt="" />
                                        </div>
…then naviation stuff which works fine


Yes, this is making things complicated. Since I’ve put so much work into it, I’d love to find some sort of solution so it at least looks right in IE 7. I just don’t know what’s causing that! Any help would be appreciated =)