css and w3c

[Teensweb]

Is there anyway to make the following code work in all browsers even while following the web standards?

/* this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.transMenu {
    position: absolute;
    overflow: hidden;
    left: -1000px;
    top: -1000px;
}

/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.transMenu .content {
    position: absolute;
    left: 20px;
}

/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.transMenu .items {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 7;
}

.transMenu.top .items {
    border-top: none;
}

/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.transMenu .background {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    -moz-opacity: .8;
    filter: alpha(opacity=80);
}

/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
    width: 2px;
    position: absolute;
    z-index: 3;
    top: 3px;
    -moz-opacity: .4;
    filter: alpha(opacity=40);
}

/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
    position: absolute;
    z-index: 1;
    left: 3px;
    height: 2px;
    -moz-opacity: 100;
    filter: alpha(opacity=40);
}

/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
/* each TR.item is one menu item */
.transMenu .item{
    margin: 0px;
    border: none;
    display: block; /* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
    font-size: 11px;
    cursor: pointer;
    cursor: hand;
}

.transMenu .item td {
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    color: #000;
}

.transMenu .item.hover {
    background: #3fb1fd;
}

.transMenu .item.hover td {
}

/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.transMenu .item img {
    margin-left: 10px;
}

/* Added classes by Khanh - 050629 */
.transMenu .item#active {
    background: #8BB448;
    color: #FFFFFF!important;
    -moz-opacity: .6;
    filter: alpha(opacity=60);
}

.transMenu .item#active.hover {
    color: #FFFFFF;
}


/* For first level menu.*/
#wrap {
    margin: 0px;
    padding: 0px;
}

#menu {
    margin: 0px;
    padding: 0px;
}

#menu td {
    width: 80px;
    text-align: center;
}

#mbttransmenu {
    margin: 0px;
    padding: 0px;
    width: auto;
}

a.mainlevel-trans:link, a.mainlevel-trans:visited {
    clear: both;
    margin: 1px 0 0 0;
    border-right: 1px solid #1C351C;
    display: block;
    white-space: nowrap;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 32px;
    height: 30px;
    width: 80px;
    text-align: center;
    font-size: 11px;
}

a.mainlevel-trans:hover {
    background: url(../images/tab-hover.gif) repeat-x;
    text-decoration: underline;
}

a.mainlevel_active-trans, a.mainlevel_active-trans:active {
    clear: both;
    width: auto;
    margin: 0;
    display: block;
    white-space: nowrap;
    border-right: 1px solid #759275;
    background: url(../images/tab-active.gif) repeat-x bottom #648364;
    line-height: 33px;
    height: 33px;
    color: #FFFFFF;
    font-size: 11px;
    text-decoration: none;
}

a.mainlevel_active-trans:hover {
    color: #FFFFFF;
}

/* End added */

[misson]

Read "How To Ask Questions The Smart Way", in particular "When asking about code"

[Teensweb]

Thanx, dude..., but i think my question was very clear.
instead of "-moz-opacity: .6;" and filter: alpha(opacity=60);"
I want a code that's cross browser compatible and is valid css...!Can u help me with that?

[misson]

Thanx, dude..., but i think my question was very clear.

Not to be rude, but you thought wrong.

Another part of asking a question about code (as alluded to in the document I linked to in the previous post) is always post a minimal test case.

instead of "-moz-opacity: .6;" and filter: alpha(opacity=60);"
I want a code that's cross browser compatible and is valid css...!Can u help me with that?

That's much clearer (you never mentioned opacity in your original post) and has an appropriate amount of code.

Remember, Google is your friend. I always like what Quirksmode has to say (4th result on the Google search), but W3 is the final word on CSS. As it says in "How to ask questions the smart way," check the documentation (W3 standards, in this case) and try a few web searches. This shows you're not lazy and you'll learn more in the process.

[libecono]

If you simply want to validate the whole stylesheet, you can do it at validator.w3.org There are other alternatives, but the result is always the same, because they are all based on the same DTD issued by the w3 consortium.

[garrettroyce]

moz-opacity is a mozilla proprietary. filter is supported by most modern day browsers, however, it is not a CSS standard.

So, to be WC3 compliant, you would use neither. CSS3 is supposed to make this possible.

[sybregunne]

if you want to be compliant just use an old technique I always use...

check what type of browser
then inject necessary code using javascript for client side or php for server side. (your choice)

this way if and when you validate your code it is wc3 compliant but with the proprietary/ non-standard css.

or you can use a different doctype. something less strict or something.

[garrettroyce]

@sybrgunne I don't think opacity is a WC3 standard in any capacity at the moment is the problem. Your technique will work really well though, if teensweb is OK with this

[Teensweb]

I switched to css3 and it works in mozilla but the damn ie still refuses to cooperate so i injected another css using js.
Now to misson, when someone says somrthing about web standards, i would straight away go to http://jigsaw.w3.org/css-validator/ and insert the code to run the check and it'll tell u what the problem is right away.(Sorry,it was my mistake, I thought u were intelligent enough to do that!)

[freecrm]

IE, particularly IE6 is a real pain with opacity.

I use the following to get through this which works fine

<img src="whatever.jpg" alt="image" style="opacity:0.5;filter:alpha(opacity=50)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50"/>