Background image is not displaying in IE6 and IE7

Question

I Have 3 divs HTML MARKUP

<div class="top-content-wrapper"></div>
<div id="content-wrapper">
</div>
<div class="bottom-content-wrapper">
</div>

Applied CSS on

.top-content-wrapper {
background:url("img/white-box-top-bg.gif") no-repeat scroll left top transparent;
height:10px;
margin:0 auto;
padding:0 30px;
width:686px;
}
#content-wrapper {
background:url("img/white-box-middle-bg.gif") repeat-y scroll left top transparent;
margin:0 auto;
padding:10px 25px 70px;
width:696px;
}
.bottom-content-wrapper  {
background:url("img/white-box-bottom-bg.gif") no-repeat scroll left top transparent;
height:53px;
margin:0 auto;
padding:0 30px;
width:686px;
}

In all major browsers its working fine but in IE6 and iE7 the background is not displaying please help me. Thank you.

Answer 1

Not sure, but it may be that you have a wrong order of parameters for the backgrounds. The proper way to sort them is this one:

background: transparent url("img/white-box-middle-bg.gif") repeat-y scroll left top;

Also, as Sam152 said in the comments, it may be the case that you don't have content in your divs, so they won't show in some browsers at all.

Answer 2

Some browsers (IE generally) don't like it when you have empty divs or divs with only whitespace in them. Generally it's better to chuck in a non-breaking space ( ) character to make sure that the browser actually thinks it's worth displaying.