CSS challenge

How concerned are you about browser compatibility? I would do the transparent border with CSS trancparency. It doesn't work in all browsers (and there's a special way of doing it for IE) but it would save you *a lot* of problems trying to do that some other way.

I would also use border-radius (and -moz-border-radius, -webkit-border-radius) to do the rounded corners. They're subtle enough that the design should work without them.

Can I give you one little design tip? If you're using rounded corners the radii should be consistent. So the corners on the Quick Facts box should match the ones on the transparent border. I also think that if the Quick Facts box is rounded the one above it with the 3 clipart links should be too.

Hi Megan, Thanks for the advice. I think your approach of the transparent border with border-radius is a good idea. I'm happy to go down that route. It's something I've used before and it generally degrades gracefully in IE.

Thanks for the design tips. Graphic design certainly isn't my forte, but is something I'm always looking to improve upon so it's great to get advice.

For the transparent edge/surround border of course a png will be simple, or you could risk a CSS3 opacity:.xx; .
From what I've tested it seems to work in most browsers.

And it would be cool of course if IE accepted RGB alpha transparency background: rgba(255, 255, 255, 0.2);
But alas with this and opacity IE will lag behind to be compliant as usual.

The background image looks like you are just going to have to have one full image. I don't really see any scope in it for any kind of fluid option.

For the semi-transparent border, I'd use a nested DIV. The outer DIV would have a semi-transparent background, while the DIV carrying the content would have a white background and margins equal to the size of border you need.

I don't recommend using opacity, since that affects all contained elements. This is how I am doing semi-transparent backgrounds these days:

#container {
color: #fc6;
background: url(images/argb44452713.png);
background: rgba(45, 27, 13, .25);
}
* html #container {
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44452713,endColorstr=#44452713); /*AARRGGBB*/
}

The background-image is a 1 x 1 pixel semi-transparent PNG that works everywhere except IE 5 and 6. The rgba background is only applied by browsers that recognize it - which is most of the current or soon-to-be-released modern browsers. Finally, you need to get rid of the PNG image for IE 5 and 6 and use a filter instead.

Hope this helps.

Thanks for the advice everyone. I decided to go down the road advised by webwiz in the end. Really enjoyed this project - its great to learn something new and put it into practice. The live site of the previous design can be seen at Renting In Leeds (www.rentinginleeds.com).