I have a nested div, and the outermost div (the container) I have a solid white background, but what it to be partially transparent. to do this I have..

-moz-opacity: 0.35; 
    filter: alpha(opacity=35);

in the css of the container. Unfortunately, it gives that attribute to everything...how can I prevent the transparency from being applied to the div's inside the container?

I'd say the easiest thing to do would be to use a transparent png as the background of the parent div. Otherwise it'd mean playing around with relative positioning of elements i believe.

well I want it to be transparent on the site so you can kinda see the background.

Which background are you talking about? The div itself or the actual background on the body/html?

the background of the div container

Let me get this straight.

You have a div container that has nothing but a white background right? And you want that white background to be semi-transparent BUT all it's nested elements to be opaque. Correct?

If so, what i am saying is this:

Set the background of the main div container to have a tiled background of a semi-transparent png image that has a white colour.

That way, transparency is never set for elements via css, unless of course defining a alpha filter for IE < 6 to render those png images correctly.

Yes you are correct.

theres a container div (with the white background)

more div's are inside the container div, but the background of the container div should be the only thing transparent, and the rest opaque.

I'm not to sure on how to go about what you are saying though.

What if I have 2 div's placed on top of eachother...one with the transparent background, the other with the content?

I'm not to sure how to place them on top of another though...

Create a new document in photoshop, sized say 50px by 50px.
Create a new layer, fill it with white and set transparency to around 70%.
Delete the background layer after (default layer).
Save it as a png, then use it as the background of your main div layer.

div.mainDiv {
background:transparent url(image_path/png_bg_image.png) repeat;
}

That should do it. Replace paths, filenames and div class names as necessary.

For IE < 7, refer to this site:

http://homepage.ntlworld.com/bobosola/pnghowto.htm

You are....awesome! Worked like a charm!

Be sure to check the results on IE6. This method won't work in that browser of course. You may need an alternative solution for 6. Hopefully you can live without transparency in one browser.

how can I prevent the transparency from being applied to the div's inside the container?

You can't, at least not that way. Opacity is INHERITED and you can't turn it off.

New to the site and still just trolling around... maybe a dead topic here but...

You can use nested div's and create transparent colored layers with just CSS.

You have to use some relative or absolute placement of your div's. It's not incredibly flexible yet... and you have to sort of design around the limitations at this point.

I've used this tactic on many sites and had success across all browsers.

Transparent layer has a fixed location, height, and width.
You can then fix your content div to the same size or not depending on your needs and design.
Place the content div in the same X,Y location relative to the 'container' DIV, and give the content div a higher Z-Index then the transparent color div.
This effectively places the 2 layers in the same place 1 on top of the other, and eliminates the parent-child relation.

<div id="container">
   <div id="transparentcolor"></div>
   <div id="content"><p></p></div>
</div>

seems rather constricting at first, but once you get the hang of it, makes for some great looking stuff.
~SMD