Backgroud images not showing up in empty divs in IE 7

[Chris]

I have a page in which many of the images are set as background images in
css for empty divs. This works fine in IE 6 and Firefox. I look at it in IE
and some of them disappear but if I write some text in the div the backgroud
appears for the length of the text. This is the strange thing the backgrond
images appear on some empty divs. Here is some sample code I am using to
create a curved top half of a box. #tl and #tr appear but contenttopbg
doesn't. Can anyone help? Regards, Chris.

<div id="tl"><div id="tr">
<div id="contenttopbg"></div>
</div></div>


#contenttopbg
{
display:block;
height:10px;
margin-left:9px;
margin-right:9px;
background-color:#ffffff;
border-top:solid 1px #3A5B0A;
}
#tl {height:10px;background: url(images/topleft.gif) 0 0 no-repeat; width:
100%}
#tr {height:10px;background: url(images/topright.gif) 100% 0 no-repeat;}

 

[Chris]

Sorry this prblem seems to apply to backgrounds in general. It's like if the
div has no content the width reduces to 0. Totally confused.

 

[cwdjrxyz]

I have a page in which many of the images are set as background images in
css for empty divs. This works fine in IE 6 and Firefox. I look at it in IE
and some of them disappear but if I write some text in the div the backgroud
appears for the length of the text. This is the strange thing the backgrond
images appear on some empty divs. Here is some sample code I am using to
create a curved top half of a box. #tl and #tr appear but contenttopbg
doesn't. Can anyone help? Regards, Chris.

<div id="tl"><div id="tr">
<div id="contenttopbg"></div>
</div></div>


#contenttopbg
{
display:block;
height:10px;
margin-left:9px;
margin-right:9px;
background-color:#ffffff;
border-top:solid 1px #3A5B0A;
}
#tl {height:10px;background: url(images/topleft.gif) 0 0 no-repeat; width:
100%}
#tr {height:10px;background: url(images/topright.gif) 100% 0 no-repeat;}

Some browsers long have had such a problem when you make a division
with only background color. The same thing seems to be happening in IE7
for you, except for background images rather than background color. The
simple solution for the background color problem is to add a 1 px
period to the division. If you can still see the tiny period, you can
specify a text color for the division about the same as the background
color where the period appears. As a general rule, beware of divisions
without content(text). I have not noticed a W3C specification that a
division must contain content, but then I have not carefully searched
for that.