Posted by cwdjrxyz on 12/10/06 16:47

Chris wrote:
> 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.

[Back to original message]