alpha filter

[Hammy]

I have a drop down menu, that uses an alpha filter to make the drop down background semi-transparent. It works great, but unfortunately, it also makes the text in the drop down menu semi transparent.

code......

<div id=dropmenu0 style="position:absolute;left:0;top:0;width:170;visibility:hidden;padding:0px;z-index:12;Filter: Alpha(Opacity=50, FinishOpacity=50, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">

<script language="JavaScript">
if (document.all)
dropmenu0.style.padding="4px"
document.write("<table border='0' background='images/overlay.gif'><tr><td>")
for (i=0;i<menu1.length;i++) {
document.write(menu1[i])
}
document.write("</td></tr></table>")


</script>
</div>

My question: can anyone tell me how to maintain the alpha filter, yet have the text inside the div/table not effected by it?

Thanks,
Hammy

[Jona]

This is the MSDN reference: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/filters.asp. It should have plenty of information on what you want on it.

Jona

[SearedIce]

what I would do is put <font style="Filter: Alpha(Opacity=100, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)> and </font> around the text

i have never used the alpha filter so what i tried to set up there is just 100% visiblity

:)

[Jona]

The FONT element is deprecated:

From the W3C at: http://www.w3.org/TR/html401/conform.html#deprecated
A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.
User agents should continue to support deprecated elements for reasons of backward compatibility.

And...

From the W3C at: http://www.w3.org/TR/html401/present/graphics.html#edef-FONT
FONT and BASEFONT are deprecated.

Jona

[scriptkid]

That wont work cause its making the div opacity lower making everything within the div have those same settings. even if u set the text to have an alpha filter of 100 it would still be affected by the divs setting...so what u could do...

You could make a second div and put the text in it and the table in the first then only apply the transparency to the tables div layer...or you could make a table fill the div and apply the setting to the table and put the text on top of the table (not actually in it or wed run into the orignial problem only with different elements).

Id go with making two divs myself.

[Hammy]

I epxerimented with making two divs as sugested, one with a higher z-index that has no alpha filter, over top of the lower z-index with alpha filter....text still comes out translucent.

Hammy

[scriptkid]

make sure your not applying the alpha filter to the div with the text in it

if your not then theres no way possible that the text is still translucent. if is unpheasable or something :-/

[SearedIce]

Jona, so we're not allowed to use <font> anymore?!

That's crazy...

Plus, that's how all schools are still teaching it to people for the first time that they learn html...

Still...I never use the flag...I just think its easier to set up everything on the page with css...but when I'm editing like one line of text I sometimes use the <font style="..."> and </font> just to make sure that people understand I'm editing the font settings of that text...not like adding a border or anything...I guess I should be using the div or span element?

I hate how the W3C "deprecates" things...plus it sounds a lot like "defecate"...

Well...I guess you guys can now all understand that I'm a 15-year-old...hehe

----------------------On Topic:

Are you sure the text is transparent...maybe you just have a lighter font color than you think...do you have something that's semi-transparent above it that would fog it out?

~John

[Jona]

Using the FONT element is deprecated, and although it works (as the W3C defines deprecated) in browsers they, "continue to support deprecated elements for reasons of backward compatibility." So if you are editing the properties of a single word in a text node, use the SPAN element; if you are editing/setting the properties of an entire block of text, use DIV.

You'll also be surprised to find that I am a 14-year-old. :D

Originally posted by SearedIce
Are you sure the text is transparent...maybe you just have a lighter font color than you think...do you have something that's semi-transparent above it that would fog it out?

I have tested his code and see his problem; the text is translucent (to an extent) as is the background. I would suggest putting another DIV inside of the table and setting its style attribute to color:black; or something of the like.

Jona

[David Harrison]

It may be that schools teaching html use the font tag so that they don't have to bother teaching css as well, after all which is more simple:
<font color="red" face="verdana" size="4">Hi There</font>

or:
<div style="font-family:12pt'verdana';color:#f00;">Hi There</div>

[scriptkid]

you gotta remember most of the kids in high school taking web design are prolly taking it to fill schedule

[Hammy]

My bad, I was nesting the second DIV, instead of placing it by itself. Works now :) Thanks all!

Hammy

P.S. I agree, use CSS whenever possible (which should be almost always). MUCH easier to change one value in a CSS sheet, to apply to the entire site, then change each page, and tag. I only use <FONT> when I want to override a set CSS value. I know I could create another class, but I find it as easy to change the odd font tag here and there as to remember which class is which.