Round corner background images

[romsok]

Hi,

I am trying to give a form on my page round corners.

I have two images to work with:

1. A top bar with form name and round left and right corners.
2. A bottom bar with left and right round corners.

So all I have to do is "squeeze" the form between them. And I am having trouble with it

Here is my HTML:


<div class="topOfForm">
<div class="bottomOfForm">
<form class="myForm">
......
</form>
</div>
</div>


My CSS:
myLayout.css

div.topOfForm
{
width: 439px;
padding: 0px;
margin: 0px;
height: 300px;
}

div.bottomOfForm
{
width: 439px;
padding: 0px;
margin: 0px;
height: 300px;
}
form.myForm
{
height: 130px;
margin: auto;
padding: 15px;
display: block;
vertical-align: middle;
margin-top: 100px;
margin-bottom: 100px;
}


background.css

div.topOfForm
{
background: url("topCurve.gif") no-repeat top;

}


Right now this form is hiding the curve image and I don't know why - only in IE it is showing up on top of the form.

Any tips? - If you could tell me what I am doing wrong, that would be very helpful.
Thanks.

[svidgen]

If you want to do this in the manner you're going about it, I you may need to encase the form in yet another DIV. A form is not necessarily a block element--browsers won't necessarily respect the margin or padding attributes of a form.

... I think.

[romsok]

thanks for the quick response...
Is enclosing the form in another div different from setting display: block in css?

[svidgen]

Potentially. You can try going that route--but beware, the popular browsers disagree on the standard set of styling that is applied to entities by default. There could be other default styles that could cause you some headaches.