space around div with background image

i'm trying to create a frame that will contain a dynamic amount of text. it has rounded corners so a created 3 divs:top, body and bottom. body will hold the 开发者_JAVA百科content while top & bottom only display the respective images of the frame. all this can be seen here:

http://www.m-challenge.com/nimrod/modular_frame.php

the problem: there is a space those top and bottom divs and the middle one. please take a look and any input would be highly appreciated. have a nice day :-)

Your issue is that the p tag has some margin on top/bottom. Give it a margin of 0 to fix that. The same would apply if you put any h#, ul and similar tags in the box.

Also, can I recommend you not spend so much time making rounded courners this way and simply use CSS3's border-radius? I know, it's not fully supported yet but you have support from most browsers apart from IE, and IE users simply get a gracefull fall back to a square box. Just a suggestion

I think you should first reset margins and paddings: http://meyerweb.com/eric/tools/css/reset/

then apply the proper values, depending on the effect you want to achieve.