background image not repeating in IE...

Question

This should be real simple...not sure what I'm not seeing here...the background image repeats just fine in non-IE browsers but fails to in IE8.

site: http://www.erisdesigns.net/Stage/McCampbellInsurance/index.html

#wrapper {
    max-width:100%;
    min-width:1000px;
    min-height:100%;
    margin:0 auto;
    background-image:url(images/shadowborder.png);
    background-repeat:repeat-y;
    background-position:center;
    margin-bottom:-70px;
    position:relative;
    overflow:auto;
}

#headwrapper {
    position:relative;
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-image:url(images/btr_rpt.jpg); /* NO REPEAT!!! */
    background-repeat:repeat-x;
    height:150px;
}

#header {
    position:relative;
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-color:transparent;
    background:url(images/KMIAFS_banner.jpg) center top no-repeat;
    height:150px;
}

#menu {
    clear:left;
    float:left;
    padding:0;
    border-top:5px solid #003a72;
    width:100%;
    overflow:hidden;
    height:70px;
}

#spacer {
    height:70px;
    clear:both;
}

#footer {
    position:relative;
    height:70px;
    width:100%;
    border-top:5px solid #003a72;
    background-color:#bec8e3;
    text-align:center;
    color:#666;
    margin:0 auto;
    margin-top:-70px;
    clear:both;
}

HTML:

</head>
<div id="wrapper">
<div id="headwrapper">
<div id="header"></div>
     <div id="menu">
       <ul>
          <li class="active"><a href="#" title="">/a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
       </ul>        
         </div>
</div>
</div>

Answer 1

Add width 100%; to #wrapper

#wrapper { width: 100%; }

Does it work?

Answer 2

Are you talking about the failure of the header image to stretch to larger than 1000px? If so, this is due to the size of the element, rather than a background issue.

This appears to be caused by the rule display: table on #wrapper in the inline stylesheet, which causes shrink-to-fit behaviour, shrinking to the min-width of 1000px. This rule makes no sense as the contents of the wrapper are not table row elements. You'd be better off with the header image outside of the fixed-width-centered wrapper and with a plain width: 100% to fill the page.

That stylesheet itself is in a downlevel-hidden conditional comment which will affect all versions of IE except 7, which seems a bad idea... is that really what you meant, and what were you trying to achieve with the display: table hack? All the -moz- rules also seem totally superfluous. This is a simple layout that should not need hacks.

Irrelevant aside: you've also included an XML declaration at the top of the file. It's best to omit this for HTML-compatible-XHTML, as it causes IE6 to fall back to Quirks Mode (even worse rendering than normal for IE6), and in any case, as it specifies only XML 1.0 in UTF-8, which are the defaults anyway, it's pointless. For HTML-compatible-XHTML you should be setting the charset parameter to UTF-8 in a <meta http-equiv="Content-Type"> tag instead.