I'm having an issue that seems simple but I can't figure out what's wrong. The background image repeats perfectly in non-IE browsers, but not in IE8.
For reference, the site is located at:
#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;
}
Here is the HTML structure:
</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>