Question

I am having a problem where for some reason in IE the background at the bottom of my page the background isn’t expanding. This seeems to work fine in Firefox but not IE. As you can see in the images below.

CSS:

#SecondaryContent
{
background: url(../images/background_slice.png) repeat-y 0% 0%;
width: 18%;
overflow: hidden;
float: left;
}

#Container
{
overflow:hidden; 
min-height:100%; 
height:auto!IMPORTANT; 
height:100%; /* Old browsers */

 /* IE9 SVG, needs conditional override of 'filter' to 'none' Doesn't seem to work!
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZmRmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iI2IzZTllZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); */
background: -moz-linear-gradient(left,  #edfdff 0%, #b3e9ef 18%, #ffffff 18%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#edfdff), color-stop(18%,#b3e9ef), color-stop(18%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%); /* IE10+ */
background: linear-gradient(left,  #edfdff 0%,#b3e9ef 18%,#ffffff 18%,#ffffff 100%);      /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edfdff', endColorstr='#ffffff',GradientType=1 );*/ /* IE6-8 */

}

Answer 1

I have resolved this myself by using this Javascript to adjust the height of the div to fit around the main div.

<script type="text/javascript">
     var theHeight = $("#PrimaryContent").height() + 100;
     $('#SecondaryContent').height(theHeight);
</script>