I'm trying to create a box with curved corners, but without using tables.

here's the code:
<div style="width:769px;background-color:#000000;padding-top:20px; color:#000000;"><img src="images/ad_banner.gif" width="558" height="69" alt="" class="centeredAd" /><img src="images/ele_btmLeftCorn_black.gif" width="6" height="8" alt="" style="float:left" /><img src="images/ele_btmRightCorn_black.gif" width="6" height="8" alt="" style="float:right" /></div>

the code is working except that between the 2 corner images (ele_btmLeftCorn_black.gif & ele_btmRightCorn_black.gif) the background-color is not being used: instead of black it's white. I know i could either use a table or just make one image that has both corners on it, but i'd rather use my 2 small images and no tables.

thanks,
Josh

Got a URL to a working example?

--
http://yupapa.com

unfortunately it's in a protected workspace. i think i'm just going to use one image instead of 2. thanks!

I would suggest using 2 images. Otherwise you will not be able to assign the block dynamic width (%).

Rather than using float to make the images stick to the left or to the right, use position. By positioning the block itself relatively (left:0px; top:0px;) you create the possibility of positioning the corners with absolute positioning. You will need to put the images inside the div block for this to work. The top left corner should be positioned left: -1px and top: -1px, asuming that the block has a border of one pixel. The right corner should be positioned right: -1px and top: -1px. This should work for you.

Happy programming!

/J Andersson