The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS - Test Your CSS Skills Number 20

As the quizzes have been a bit quiet lately I have made this one very simple and should be solved in a matter of minutes so it should be suitable for all to have a go.

If you look at the first screenshot (opacity-faded.jpg) you will see that an attempt has been used to use the CSS "opacity" property on the background of the centred box with the unfortunate effect that not only has the background become transparent (as was required) but the inner foreground image and foreground text has also become transparent making the text hard to read and the image look bad.

Your task is to stop the inner content from becoming transparent and if you look at the second screenshot (opacity-full.jpg) you can see how it is supposed to look.

Your task is to make this work in IE6+, Firefox3, Opera and Safari (latest versions). You must use the opacity property and not transparent background pngs to achieve the effect.

The centred box must be a fluid width and height and cannot be a fixed height and width. It must grow and expand with content and screen resize.

I will give you the code for the first version with the faded text so that you have the general structure and the opacity properties to use but you can change it or use your own. As usual no scripting and no hacks apart from the ones I will supply below.

As mentioned above you can change the code to suit as much as you like but my original answer doesn't change more than half a dozen lines at most. However see what you can come up as all methods will be of interest. You will have to use your own images for the example and if you can make a prettier example then mine then all the better

Remember your answer should work with any amount of content and work in a fluid width and height elements. There is no need to duplicate the text content either (as in other previous quizzes).

Do not post your answers here but PM them to me so that others can have a go without seeing your answers.

Any questions just ask and remember this is just for fun

Solutions to the quiz will be posted later in the week (or longer) depending on how it goes

I have entries from A2k, Ryan and Roobear but they are just not quite correct but well done to all anyway

A2k's is very nearly there but needs to work in IE6.

Ryan has used duplicate content which I said not to use.

Roobear is nearly there but needs to fix a scrollbar and height problem.

To recap the layout must work without a set height and the screen size is fluid so content can grow and expand as required (without a scrollbar appearing on the content). The layout must also work in IE6 which needs a very slight change to other browsers.