Rounded corners problems

[smk17]

I was asked to design a website where the client had a good idea on what she wanted the site to look like. She wanted rounded boxes which could resize depending on content. She wanted these boxes semi-transparent so you could see the background through it (the background is an image).

I did some searching and found this site on rounded resizable boxes ( <snip> )

It was exactly what I wanted, well 90% anyway. I did have to change the corner and edge images to a different look and I gave the inside of the boxes a semi-transparent background.

Here is the site I made ( <snip> ) And I'm not talking about the navigation rounded buttons, but the other boxes on the left hand side and the main large rounded box.

If you look close at the rounded corners of the boxes, you'll see that they are not transparent. The corners are white and when they fall over a colored area of that background image, it looks bad. So I thought, I'll make them a transparent gif. That didn't work because then the side border of the box will show behind that corner image and the box will then look square. I asked the guy who came up with this code and he is stumped. So here I am pleading for any help that may solve this.

My gut tells me there is no solution, until css3 is in more use. Because she wants the box semi transparent and have that sort of image as the background, it will not work. If the background was one color I could easily make it work. She really doesn't want to make the boxes square, which would work also.

Thanks for any help
Steve

Any thoughts? Is there a way to specify a border image so that it doesn't go all the way to edges? Say an 11px margin on each corner so the transparent corner images won't show the edge borders?

[edited by: swa66 at 2:54 pm (utc) on Nov. 18, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]

[swa66]

You can get what you seek for Safari, Chrome and firefox: use CSS3 rounded corners and the pre-CSS3 settings as well as an rgba background color.

For IE: you'll need to live with a degraded solution. One alternative might be in scripting (but it's beyond my skill level at this time).

Another might be to not resize it in IE (so you can have the image itsefl altered as needed

Yet another avenue you could dig in is VML: it's supposed to be the MSFT alternative to SVG (which they don't implement), maybe it can draw the background you need.

Forward your customer's complaints to those in charge at Microsoft :) You can't be responsible for their mistakes.

I fyou can find a customer to sponsor the research: great, but I guess there's a limit to how far they'll be willing to pay for it all.