Make a DIV Transparent

Yes, yet another site: Memories and Music. I can't take credit for developing the platform for this one though. I wanted a strong and flexible blog/CMS solution, so I went with a hosted WordPress setup.

I picked a pre-made template, but had to do some extensive CSS editing to get it to look the way I wanted. One of the things it had was a semi-transparent png image as the background in both the left and right sections. I guess there's some deal gere with Internet Explorer 6, because in IE 6 the images weren't transparent. Too bad, because one of the cool effects was being able to see the image through the two content layers.

So I dug around a little and uncovered how to make layers (DIV or SPAN sections) semi-transparent. There's a method for IE 6 and one for FireFox adn (I'm assuming) other browsers.

Your div:

<div id="TheDiv:></div>

Put these in the style declarations IE 6:

#TheDiv {filter:alpha(opacity=60);}

The opacity runs on a scale of 0 - 100, so 60 percent - 60% opaque.

For FireFox:

#TheDiv {-moz-opacity: 0.6;opacity: 0.6;}

In this case, the opacity runs from 0.0 to 1.0, so a .6 corresponds to 60%.

At Memories and Music, I ended up removing the background png images, setting the background-color to white and using an opacity setting of 90%. So I was able to keep the cool semi-transparency effect in both browsers.