The opacity CSS setting is not valid for all browsers. It's the CSS standard, but not everyone supports it. For full support, try:

div.outter
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

div.outter div
{
filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}

Also: bear in mind that you're going to get the combined effects of both if you try to make the opacity of the inner 'div' 0. I know you're making it fully opaque, so it shouldn't be a problem, but just FYI.

If you put a piece of red glass on top of a sheet of paper with writing on it, it'll be partially opaque/transparent. You'll see the text bleed through, but it'll be red. Let's think of this as your first 'div' (the 'outter' one).

Then put a clear piece of glass on top of that. Well, that clear piece of glass is fully transparent (not opaque at all), but you're still going to get the red bleeding through from the red glass underneath it. This is your second 'div'.

There's a LOT of fancy legwork involved in clipping out the portion of the first 'div' so that a transparent inner 'div' does not bleed it through. It's been done with jQuery, to my knowledge, but it's an enormous pain.

Final thought: make sure you've set the inner 'div' to have some kind of background color, even if it's white (or otherwise matches your layout), or it will be fully opaque with a transparent background -- which doesn't do you any good. Example:

<div class="outter" style="background-color: Red; padding: 4px;">
Hi!
<div style="background-color: White;">What's up?</div>
Back again
</div>