Header Problem in IE - Need Help

Discussion in 'CSS' started by ematthys, Sep 16, 2007.

0
  1. #1
    I am trying to redesign my website and I have come across a problem with my header in Internet Explorer being pushed over to the right almost halfway across the page. I have tried setting a margin-left to move it over, and setting clear: left, and some other random things in hope that they would fix it, but I can't seem to solve the problem.

    It displays perfectly in Firefox, Safari, Opera, Camino...but not IE of course.

    The html for the layout is structured like this:
    
<body>
<div id="fullheightcontainer">
<div id="centerfill"><!-- for IE7 --></div>
<div id="rightfill"><!-- for IE7 --></div>
<div id="wrapper">
<div id="outer" class="floatcontainer">
<div id="float-wrap" class="floatcontainer">
<div id="leftwrap">
<div id="menu">
  
  </div>
        <div id="ads">

                    </div>
</div>
</div>
<div id="rightwrap">
<div id="horizmenu">
   
    </div>
   <div id="content">
        <h1>Page Title</h1>
<div id="contenttext">

</div>
</div>
<div id="footer">
           
    </div>
  </div>
</div>
</div>
</div>
<div id="header"></div>
</body>
    Code (markup):
    And the important part of the css file is:
    
#fullheightcontainer {
  position: relative;
  margin: 0px auto;
  width: 776px;
  display: table;
  height: 100%;
 
  background: #fff url('/template/images/bgspan.gif') repeat-y left top;
  text-align: left;
}

#wrapper {
  display: table-cell;
  position: relative;
}

#outer {
  position: relative;
  margin-right: 600px;
  background: #fff url('/template/images/leftbg.gif') repeat-y left top;
  height: 100%;
}

#float-wrap {
  width: 100%;
  float: left;
  display: inline;
}

#leftwrap {
  position: relative;
  width: 100%;
  float: right;
  height: 100%;
  margin-top: 105px;
  display: table;
}

#rightwrap {
  float: left;
  display: inline;
  width: 600px;
  margin-top: 105px;
  margin-right: -600px;
  position: relative;
}

#header {
height: 105px;
width: 100%;
position: absolute;
top: 0px;
text-align: center;
background: url('/template/images/banner.jpg') no-repeat center top;
}

#menu {
background: #fff url('/template/images/leftmenubg.gif') repeat-y left top;
width: 176px;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
}
    Code (markup):
    And finally there is a conditional statement for IE 7:
    
    <!--[if IE 7]>
    <style type="text/css" media="all">
    #fullheightcontainer {height: auto; min-height: 100%;}
   
    #centerfill, #rightfill {
      display: block;
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
    }
   
    #rightfill {
      left: 100%;
      width: 600px;
      background: #ffffff;
      margin-left: -600px;
    }
    </style>
    <![endif]-->
    Code (markup):
     
    ematthys, Sep 16, 2007 IP