I've wasted a lot of time trying to get my site behave in IE and Fire Fox. I want a transparent containter over a background image. It looks great in my Coffecup HTML editor, but does not come out in IE or FF. Here is the CSS:

<style>
body {
color : #000;
font : 14px Helvetica, Arial, sans-serif;
font-weight : bold;
line-height : 18px;
background-image: url('imageabsolute/tree2.JPG');
}
h2 {
color : #000;
}
a {
color : #cc9933;
}
p {
margin : 0 0 18px;
}
#container {
width : 940px;
margin : 0 auto;
background-color : #fff;
opacity: .85;
filter: alpha(opacity=85);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
}
.top {
background-color : #fff;
margin-top: 40px;
}
#header {
background : #fff;
height : 250px;
border-bottom : 2px solid #ddd;
background-image : url('images/banner1.png');
opacity: .85;
filter: alpha(opacity=85);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
}
#header p {
color : #000;
font-size : 11px;
font-weight : bold;
padding : 0 18px;
}
#navigation {
display : inline;
margin-left : 18px;
}
#navigation ul {
padding : 0 18px 30px;
}
#navigation a {
text-decoration : underline;
text-align : center;
font : 20px Tahoma;
color : #000;
}
#navigation a:hover {
text-decoration : underline;
color : #cc9933;
}
#extra {
margin : 0 18px;
font : 16px Tahoma;
}
#extra small {
line-height : 18px;
}
#content {
border-bottom : 1px solid #ccc;
margin : 0 18px;
font : 16px Tahoma;
}
#content p, #extra p {
padding-right : 18px;
font : 16px Tahoma;
color : #000;
}
p.c1 {text-align: center}

.floatleft {
float : left;
margin : 0 90px 30px 20px;
width : 400px;
}
.clear {
clear : both;
}
#navigation {
float : left;
width : 100%;

}
#navigation li {
display : inline;
list-style-type : none;
font : 16px Tahoma;
padding-right : 30px;
}
#extra {
float : right;
width : 350px;
}
#footer {
background : #fff;
border-top : 2px solid #999;
clear : both;
}
#footer a {
color : #cc9933;
}
#footer p {
color : #cc9933;
margin : 0;
padding : 0 18px 10px;
}
#footer ul {
border-bottom : 1px solid #555;
list-style : none;
margin : 0 18px 6px;
padding : 10px 0 6px;
}
</style>

*************************************************
I found this css code after doing a search on opacity not showing in IE
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);

But it still isn't working.

Then the NEW problem of the day is my menu navigation isn't working in Firefox!

I'm just about ready to scrap the whole thing and do something totally different...any suggestions before I do?

here's the link http://www.imageabsolute.com/index.html

Hi Amy,

Could you please post a screenshot of how the banner and navigation are supposed to be? I get two different things here, one where the navigation comes above the banner, and then one where the navigation goes on top of it. Which one is the one you want?

the navigation should be above the banner image. Attached is a screen shot

Hmmm, I saw there was a reference to a tree image, but I hadn't seen it until you posted your screen shot...

I'm working on your design, maybe we get somewhere...

Thank you! I appreciate the help and need to learn where my mistakes are.

Well, for starters I have made your translucent container into a .png that tiles...

I think that is a safer option.

Hi again, you have a really nice design - now that I can see it

I posted the changed files to the mail address I found on your site.

If you have the banner with a transparent background I guess that will look better than what I've done.

OOops, I overlooked something: In the css file I sent, locate this line of code:



and remove this bit: background : #fff; filter: alpha(opacity=85);

That will be necessary for a banner with a transparent background to let the tree show through.

As for the css for opacity, I don't think many browsers are ready for it yet.

Inger and Amy... beauty site I really like it. Like the cover on a coffee table book.

As for opacity, Ive had good success with the following css



and applied in html thus



this way I can define a 70% transparent class once and apply it to objects as required.

Works in IE, FF, Opera, Chrome, and Safari.