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.

whoops came in late!
ill explain the solution in plain english as i promised.

background-color:rgba(0,0,255,0.4);

is like opacity, but only affects the background color (doesn't work on images, only color backgrounds)
so you can add that to the container, and only the container will have a semi transparent background, while the contents remain full opacity.

this doesn't work in IE. (or old versions of mozilla, opera)
so for IE i used the position:relative trick on the IE filter property (that paul mentioned earlier)

for the IE opacity filter to apply opacity only to the container and not the contents, the container has to NOT have a position.
while the contents must have position:relative/position:absolute.

this broke the layout in ie, so i added a extra container div which did have position which contained the opaque div that contains the text/images.

note: initially it was the .opaque div that had the opacity (and still does for ie), but eventually the extra div (.darnit div) ended up having all the opacity on it.

whoops came in late!
ill explain the solution in plain english as i promised.

background-color:rgba(0,0,255,0.4);

is like opacity, but only affects the background color (doesn't work on images, only color backgrounds)
so you can add that to the container, and only the container will have a semi transparent background, while the contents remain full opacity.

this doesn't work in IE. (or old versions of mozilla, opera)
so for IE i used the position:relative trick on the IE filter property (that paul mentioned earlier)

for the IE opacity filter to apply opacity only to the container and not the contents, the container has to NOT have a position.
while the contents must have position:relative/position:absolute.

this broke the layout in ie, so i added a extra container div which did have position which contained the opaque div that contains the text/images.

note: initially it was the .opaque div that had the opacity (and still does for ie), but eventually the extra div (.darnit div) ended up having all the opacity on it.

Thanks for the explanation. I'm definitely going to experiment a bit with your solution as I've never really dabbled with rgba.

1) The empty div with class of opaque is necessary because it holds the transparent background. Transparency works as a "whole" on all the elements within a parent. All children get the transparency whether they like it or not.

To circumvent this issue the transparency is applied to an empty div that has no children. It is then placed under the content that needs a transparent background. There will be no "inherited" transparency because the div has no children and therfore the text sitting on the opaque background is not affected and remains at 100&#37; solid.

The trick in the quiz was to make sure that this absolutely placed transparent element keeps pace with the fluid content above it. (This is explained in previous posts).

2) That has nothing to do with the quiz and I just stuck an image at the end of the html and positioned it so that it stretched with the viewport (to a degree) and shrunk or grew as required unlike abackground image which just stays put. I dont know why I bothered to tell you the truth because it's a horrible effect

It's always best to have your absolute elements at the end of the html in the current stacking context because IE gets confused and will ocassionally hide them. This is a common problem in IE and therefore its best to have the absolute element at the end of it's current stacking context (not outside it).

Thanks Paul, for helping me get this. Could I ask for one last clarification. What mechanism allows the two divs (classes "content" and "opaque"). What's confusing me is how the two divs are able to occupy the same area.

Also, do I have it correctly that the div (opaque) with the opacity property falls below the content div due to its low z-index (1)?

If these questions have obvious answers, please excuse and ignore. I'm going back to the books to revisit positioning next, so maybe I'll answer my own question soon.

Thanks Paul, for helping me get this. Could I ask for one last clarification. What mechanism allows the two divs (classes "content" and "opaque"). What's confusing me is how the two divs are able to occupy the same area.

The opaque div is absolutely positioned and absolute elements are removed from the flow. This means other elements don't care about it and it can be placed within its stacking context wherever you like and other content will just flow over it.

A stacking context is created by the nearest positioned parent (e.g. a parent that is either position:absolute itself or more often than not has position:relative applied just for this purpose).

If the parent is position:relative then the absolute element is placed in relation to that parent and not the viewport.

The trick in the quiz was to make the absolute element keep track with the parent's size and this was explained above in the quiz answers.

Also, do I have it correctly that the div (opaque) with the opacity property falls below the content div due to its low z-index (1)?

Yes positioned elements can have z-index applied to control which element overlaps another. The rules are more complex than this and you can find out more in the reference on z-index and stacking contexts.

This information definitely helps. Thanks! I also spent several hours re-reading the Meyer text on floating and positioning... and lots of other revisits to this and that in my refs that seemed relevant. Now, I need to sort of review it all as I apply it. But, it's making sense. Again, many thanks -- rbfree