opacity problem with text

[centerwork]

The problem I am having is that the text over the background remains transparent no mater what I do.

 

Any suggestions would be appreciated.

 

<style type="text/css">
.box_css{
    width:600px;
    opacity:.2;
    -moz-opacity:0.2;
    filter:alpha(opacity=20);
    }
.default_box{
    display:block;
    }
.default_box *{
    display:block;
    height:1px;
    overflow:hidden;
    font-size:.01em;
    background:#CCCCCC;}
.default_box1{
    margin-left:3px;
    margin-right:3px;
    padding-left:1px;
    padding-right:1px;
    border-left:1px solid #6c71d7;
    border-right:1px solid #6c71d7;
    background:#8ea2dd;}
.default_box2{
    margin-left:1px;
    margin-right:1px;
    padding-right:1px;
    padding-left:1px;
    border-left:1px solid #483fd0;
    border-right:1px solid #483fd0;
    background:#94abde;
    }
.default_box3{
    margin-left:1px;
    margin-right:1px;
    border-left:1px solid #94abde;
    border-right:1px solid #94abde;
    }
.default_box4{
    border-left:1px solid #6c71d7;
    border-right:1px solid #6c71d7;
    }
.default_box5{
    border-left:1px solid #8ea2dd;
    border-right:1px solid #8ea2dd;
    }
.default_boxfg{
    background:#CCCCCC;
    }
.box_body{
    color:#000000;
    }
</style>

<div class="box_css">
    <b class="default_box">
    <b class="default_box1"><b></b></b>
    <b class="default_box2"><b></b></b>
    <b class="default_box3"></b>
    <b class="default_box4"></b>
    <b class="default_box5"></b></b>
    <div class="default_boxfg">
    <b style="opacity:.9; -moz-opacity:.9; filter:alpha(opacity=99);">
    <!-- content goes here -->
    Here is some text for the testing<br />
    ajfsljfsdfksa<br />
    askdfkjdsf
    <br />
    </b>
  </div>
  <b class="default_box">
  <b class="default_box5"></b>
  <b class="default_box4"></b>
  <b class="default_box3"></b>
  <b class="default_box2"><b></b></b>
  <b class="default_box1"><b></b></b></b>
</div>

 

 

[gethinw]

It's because opacity is applied to the whole of each layer - as the lowest level div element (class="box_css") is opaque everything else inside it also will be opaque. Imagine that you wanted this browser window to become opaque, you would expect the whole thing to become opaque, including all of this content, it's the same with divs - everything inside the div will have the opacity applied to it. Adding further opacity inside nested divs just mean that opacity will be applied twice, ie a 0.5 opacity div within a 0.5 opacity div is equivalent to a 0.25 opacity div. Or 0.75, I can never remember which way round it works...

 

Anyway, the best solution I've found to this is to use images, even if you just want a plain background. For example, for an opaque red background, create a small (just a few pixels square) opaque red square as a png file, and then use:

 

.box_css{
    background-image:url("red.png");
    background-repeat:repeat;
}

 

Also, I'm slightly intruiged as to why you're using so many 'b' tags? As you have them set to display:block why don't you just use divs?

[centerwork]

All of the tags are what achieve the rounded corner affect. This is from: http://www.spiffycorners.com

 

It seems to work on all browsers. I am upgrading it to inclued transparency option.

 

This will eventually be going on a page were the users of my site will be able to customize there pages. If I am successful.

 

Is there any way arround this layer issue?

[nadeemshafi9]

depends what is the image is it a transparent image ?