Question

I got from web designer layout, which contains (probe):

<div id="subMenuRow">
 <div id="subMenuRowHTML">
  <a href="/link">Link</a>
 </div>
</div>

and respectively css for it:

#subMenuRow{
        width: 900px;
        height: 40px;
        background: #000000;
        float: left;
        clear: both;
        filter:alpha(opacity=30);
        -moz-opacity:0.3;
        -khtml-opacity: 0.3;
        opacity: 0.3;
}

Opacity is used to make transparent bar for html menu. The problem is, that every text including links contains transparency as well, which is very unnecessary. How to avoid opacity for subMenuRowHTML?

Answer 1

First you don’t need to use -moz-opacity and -khtml-opacity anymore. They are very very old.

There is no solution fully supported today. CSS3 RGBA solves this in modern browsers but if you need to support old browsers you will need to use semi transparent png:

#subMenuRow { background: url(semi-trans.png); }

IE6 will degrade gracefully with this:

* html #subMenuRow { background: url(full-opacity.gif); }

There are also easy options for png transparency on IE6. It’s up to you.

If you have many instances of opacity on your code and don’t want to mess up your code with * html everywhere you can use conditional comments.