Background image is not displaying in IE6 and IE7

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.

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.

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.