This is not a fix for every single browser out there and for every possible scenario, but it’s working in IE > 6, Firefox 3+ and our current versions of Safari (4.0.3) and Opera (10.51).
(If you come up with a variation to make it work in additional browsers, please share your findings!)

First, the situation:

We have a background image and we want to make to container on top it semi-transparent (so the background image is still visible), but inside this nested container we have another item (an image, a div, etc) which we DO NOT WANT to be transparent.

The two images side-by-side show the desired result (left, image in nested container NOT transparent) and the actual result (right, image in nested container is transparent):

The code is as follows (simplified):
HTML:

Lorem Ipsum


<p>In id nulla vitae nisi aliquet blandit in facilisis tellus. Duis et mauris eget enim posuere commodo. Aliquam et leo augue. Sed ut diam lacus.</p>
read more &raquo;

CSS:

.bgdiv {
	font-family:Arial, Helvetica, sans-serif;
	height:400px;
	width:400px;
	background:#ffffff url('[path-to-image]') top left no-repeat;
	padding:15px 0 0 0;
}

#content {
	min-height:340px;
	width:300px;
  	background-color:#ffffff;
	/* for IE 8 - always needs to come first */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
  	/* for IE */
  	filter:alpha(opacity=85);
  	/* for FF etc */
  	opacity:0.85;
  	-moz-opacity:0.85
}

.servicebox {
	width:200px;
	margin:20px auto;
	color:#666666;
}

.servicebox h1 {
	font-family: Century Gothic,Myriad Pro,Arial,Helvetica,sans-serif;
	font-size:16px;
	color:#bf31ad;
	margin:0 0 12px 0;
	width:200px;
	line-height:12px;
	padding:10px 0;
	border-bottom:1px solid #bf31ad;
}

.serviceimg {
	border:1px solid #bfbfbf;
	width:200px;
	overflow:hidden;
	margin:0;
}

.servicebox p {
	font-size:12px;
	margin:0;
	padding: 15px 5px 5px 5px;
	color:#222222;
}

.servicebox div.more {
	text-align:center;
	color:#ffffff;
	height:20px;
	width:100px;
	margin:5px 0 0 100px;
	font-size:11px;
	line-height:18px;
	background:url('[path-to-sprite]') 0 0 no-repeat;
}

.servicebox div.more:hover {
	background:url('[path-to-sprite]') 0 -20px no-repeat;
	color:#2c8819;
}

Lines 12-14 are responsible for the transparency, we used -moz-opacity and opacity for Firefox, Safari, Opera, etc, and a filter for IE.

You can see everything that sits on top of (or inside) the "content" div automatically becomes transparent as well, no matter what you do. As mentioned above, we tried all suggestions we could find – to no avail.

Except for these:
IE 7: To make the images contained in the "servicebox"div opaque, simply add

.servicebox {position:relative;}

to the "servicebox"div. This won’t work in Firefox, etc, but it doesn’t hurt the layout either.

To make it work in Firefox, Opera & Safari, we had to make use of the color model in CSS3:
Instead of setting -moz-opacity and opacity for non-IE browsers, we added

#content {background-color: rgba(255, 255, 255, 0.85);}

to the "content" div, where the last part (0.85) sets the transparency/opacity level for that object only.

Although browsers that don’t understand CSS3 should ignore it and simple move on to the next step, we experienced weird behavior when simply adding to the style sheet.

So we tried conditional statements, but then the code didn’t validate and we had trouble with the explicit non-IE condition {sigh}.

The final result was probably the easiest one (naturally rgba only validates against CSS3, see below):
Detect the browser with PHP (very basic) and display the required declarations (or load a browser-specific stylesheet) based on the browser detection result.

<?
$isIE6 = 0;
$isIE7 = 0;
$isIE8 = 0;
$ie6 = "MSIE 6.0";
$ie7 = "MSIE 7.0";
$ie8 = "MSIE 8.0";

$browser = $_SERVER['HTTP_USER_AGENT'];

if(stristr($browser, $ie6) !== false ) {
	$isIE6 = 1;
	// add any styles for IE 6 here
	// not really necessary
	// $style = "";
	/* to add a browser-specific stylesheet for IE6, simply add this:
	$style = "
";
	*/
} elseif(stristr($browser, $ie7) !== false ) {
	$isIE7 = 1;
	// add any styles for IE 7 here
	$style = "


";
	/* to add a browser-specific stylesheet for IE7, simply add this:
	$style = "
";
	*/
} elseif(stristr($browser, $ie8) !== false ) {
	$isIE8 = 1;
	// add any styles for IE 8 here
	$style = "


";
	// to add a browser-specific stylesheet for IE8, simple add this:
	// $style = "
";

} else {
	$isIE6 = 0; $isIE7 = 0; $isIE8 = 0;
	$style= "


";
	/* to add a browser-specific stylesheet for non IE6/IE7, simply add this:
	$style = "
";
	*/
}
?>

Super-short version (active version on Demo page):

<?
$browser = $_SERVER['HTTP_USER_AGENT'];
$browsers = array("MSIE 6.0","MSIE 7.0","MSIE 8.0");
$styles = array("",".serviceimg2 {position:relative;}",".serviceimg2 {position:relative;}");
$msie= 0;

for($x = 0; $x < count($browsers);$x++) {
	if(stristr($browser, $browsers[$x]) !== false) {
		$sstyle = $styles[$x];
		$msie= 1;
	}
}
if($msie == 0 || !$msie) {
	$sstyle = "#content2 {background-color: rgba(255, 255, 255, 0.85);}";
}
$style = "


";
?>

Insert $style (or its output) via shorthand PHP into your HTML code:

<head>
	[other important things go here]
	<?=$style;?>
</head>

2) Dress up your input/text fields: rounded corners, changing colors: The easiest way ever

What you need:
a) An image sprite (if you want the colors to change)
b) A CSS class to apply to your text fields
c) The :focus pseudo-class

Basically we are using almost the same method as in the first part of the series, Dressing up your Submit button in which we use the :hover pseudo-class to change the background image for the submit button when the users moves the mouse over it.

We cannot use the :hover class for text fields, we will be using the :focus pseudo-class instead. :focus gets triggered when a user places the cursor inside a text field (related to JavaScript’s focus() method).

The sprite we are using is the following:

Let’s create a simple text input field and assign the class “txtfld” to it:

The CSS gives the field its refined look:

.txtfld {
	font:1.1em  Verdana, Arial, Helvetica, sans-serif ;
	width:274px;
	height:24px;
	border:0;
	background:url("path-to-your-image-file") no-repeat 0 0;
	color:#FFFFFF;
}

1: Define the txtfld class
2: Font declaration shorthand:
enlarge font size to 1.1
use Verdana, Arial, Helvetica and make sure if none of these are available that we are still using a font without serifs (sans-serif)
3: Set the width of the field
4: Set the height of the field
5: Set the border to 0, otherwise the browser will display the default border around the element
6: Shorthand background definition:
Set the path to the sprite
Don’t repeat the image
Start displaying the image 0px from the top and 0px from the left (you can always use “top” and “left” instead of 0px — without the quotes)
7: Set the font color for the text inside the field (white)

Similar to the technique used to change the background image for the submit button, we use another pseudo-class to change the background image when the user places the cursor inside:

.txtfld:focus {
	background:url("path-to-your-image-file") no-repeat 0 -30px;
}

All this code does is tell the browser to display a different part of the sprite, starting at 0px from the left (like before) but only show the part of the image starting 30px from the top. You can use “left -30px” to achieve the same result.

You can see the effect when you click in one of the field in the comment form at the bottom of this post.

Note/Disclaimer:
IE 6 AND IE 7 will display the background image, but since they don’t recognize the :hover pseudo-class the background does not change.
IE 7 finally does understand Alpha transparency in PNG files, but again, if you do want your form fields to look halfway decent in IE 6, create the images with a matching background.

We are not designers, we just like pretty things (and pretty code). And we like it best if it all is functional and adds to the experience without limiting it. And while we do use jQuery for certain effects on other sites, these a pure CSS solutions.

Everything described here we are using in the comments form at the bottom of this page.

1) Dress up your Submit button (without using input type="image"): The easiest way ever

What you need:
a) an image sprite
b) a class/id to identify your submit button
c) the pseudo-class :hover

We are using a sprite (an image containing our button’s two *states*) to avoid loading another image (plus we promised not to use any JavaScript); we are simply shifting the visible part of the image when :hover is called (the user moves the mouse over the button).

We are using a blank sprite (without any text); this way we can simply assign what we want to appear *on the button* to the button’s value in our HTML code instead of having to create a variety of different images. We are NOT using the sliding doors technique (first introduced in 2003) to create variable width buttons.

Our sprite is 150×50 and will definitely accommodate the text *submit comment*:

We create a submit button, and (we like it simple) add an id with the value *submit*. If you have more submit buttons on your site, create a class for them and automatically apply the definitions to all your submit buttons. Remember: an id must be unique to the page.

The HTML:

We need some CSS:

#submit {
	border:0;
	width:150px;
	height:25px;
	color:#111111;
	font-size:11px;
	background:url("path-to-the-image-file") no-repeat 0 0;
}

What is happening here?
1: Add a selector for the previously assigned id “submit” (#submit).
2: Set the border to 0. Otherwise, your browser will display the default border around the element.
3: Set the width of the button (150px – same width as the sprite)
4: Set the height of the button (50px – 50% of the sprite’s height)
5: The color for the foreground font (the color you want the text on the button to be)
6: The font size
7: Shorthand background definitions:
Path to the sprite (url)
do not repeat the image
start displaying the image starting at 0 px from the left and 0 px from the top (You can also use “top left” instead of 0 0).

In the :hover declaration for the id “submit” (#submit) we change the foreground color (the color for the text) and tell the browser to display a different part of the image: start at 0 px from the left (same as above) and 25 px from the top:

#submit:hover {
	color:#a2eb41;
	background:url("path-to-the-image-file") no-repeat 0 -25px ;
}

Note/Disclaimer: While IE 6 will display the background image, it does not recognize Alpha transparency in PNG files. If you need to match the background-color of your element, create your sprite with a matching background.
IE 6 also does NOT recognize the :hover pseudo-class. Font color and background image do not change in IE 6. IE 7 does recognize :hover, but still doesn’t recognize :focus (which we will use in the next part).