rounded corner box without a content

[lilla]

Hi all!

This example here works when inside the
<div class="tretja">
</div>
is a content.
How can I display rounded corner box when it is no conten inside them?
I try to tell the width but appare only the repeated middle image.
The classes are because i must reuse the code for that rounded corner box.

Thanks for help
Lilla

The code:

<div class="prva" id="empty">
<div class="druga">
<div class="tretja">
</div>
</div>
</div>

#empty{
height:100px;
}

.prva{
background: url(../images/middle.gif) center repeat-y;
margin:0 0 8px 0;
}
.druga {
background: url(../images/top.gif) top center no-repeat;
}
.tretja {
background: url(../images/bottom.gif) bottom center no-repeat;
margin:0;
}

[SuzyUK]

Hi lilla and Welcome to WebmasterWorld!

you chould use a min-height on your "tretja" div. You won't need the "empty" id.

IE6 and below doesn't support min-height but you can use height for it instead as it will stretch if there is content in the box.

e.g.

.prva{
background: url(middleimage.gif) center repeat-y;
margin:0;
width: 200px;
}
.druga {
background: url(topimage.gif) top center no-repeat;
padding-top: 20px; /* height of rounded bit of image */
}
.tretja {
background: url(bottomimage.gif) bottom center no-repeat;
padding-bottom: 20px; /* height of rounded bit of image */
min-height: 80px;
}

/* min-height FOR IE6 and below */
* html .tretja {height: 80px;}