CSS help

[bazookaman]

So i've laid out my site with mostly CSS. header, 2 columns and a footer.

Here is the CSS for my main column:
#main {
float:left;
width:550px;
padding-top: 38px;
background: url(../images/ground-content.gif) no-repeat center 19px;
opacity: 0.4;
filter: alpha(opacity=40);
}

#main p {
font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
padding:0px 38px;
}

I have the opacity adjusted to allow the background image to show through the "ground-content.gif". It works great in mac and PC and IE even. However, it also makes my text fade too. So my question is how do I do the above, but w/o making the text transparent too?

[Greg the dogsitter]

Maybe put the text into a with different css properties?

[bazookaman]

yeah. i tried that. no dice.

I'm sure there is a solution. Or maybe there isn't. Its a really nice effect.

[M A V I C]

That works in IE6?

[bazookaman]

yeppers.

you know. except for the whole turning my text translucent too.

[M A V I C]

doh! missed the filter: alpha

Try setting #main p to having an opacity and alpha of 100%.

[bazookaman]

I tried this to no avail:

#main {
float:left;
width:550px;
padding-top: 38px;
background: url(../images/ground-content.gif) no-repeat center 19px;
opacity: 0.4;
filter: alpha(opacity=40);
}

#main p {
font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
padding:0px 38px;
opacity: 1.0;
filter: alpha(opacity=100);
}

[M A V I C]

Is it a div? If so, try div#main for the first one.

If you happen to have a link to the code, that might help.

[bazookaman]

here is the page...
http://www.sterilmedrepair.com/SM2/pages/dummy2.shtml

here is the stylesheet...
http://www.sterilmedrepair.com/SM2/styles/styles.css

Both are rough at this point and need refining.

[bazookaman]

the #main div comes first so everything contained therein is affected by its style. Right?

So is there a way to place the image that I've got in the main div elsewhere? And then the main div can sit on top of it.