alpha filter question in internet explorer

caalip · 05-20-2009, 04:09 AM

Hey,

I am trying to make links progressively less alpha. A fading is based on text size. PHP does all the calculations, to produce code similar to the following code. However, the actual HTML here does not seem to work.

Code:

<body style="font-weight:bold;">

<h3>Tags</h3><br />
<a href='http://link' style='font-size: 22pt; filter:alpha(opacity=50); opacity: 0.5; '>Link One</a> 
<a href='http://link' style='font-size: 16pt; filter:alpha(opacity=71.4285714286); opacity: 0.714285714286; '>Link Two</a> 
<a href='http://link/' style='font-size: 8pt; filter:alpha(opacity=100); opacity: 1; '>Link Three</a> 
<a href='http://link/' style='font-size: 14pt; filter:alpha(opacity=78.5714285714); opacity: 0.785714285714; '>Link Four</a> 

</body>

If you test this code in firefox, it works fine, but the filter:alpha, for internet explorer, does not seem to work.

Is there another way to have this same affect?

Thanks,
Grae

Lonnon · 05-28-2009, 07:21 AM

The alpha filter in IE only works on an element that has "layout." In order to give an element this magical layout, set its height or width property, or give it absolute position. An example:

Code:

<p style="width: 100%; filter: alpha(opacity=50);">wibble</p>

There's a ton of excruciating detail on the following page:

http://msdn.microsoft.com/en-us/libr...67(VS.85).aspx

frankle · 05-28-2009, 07:54 AM

Quote:

Originally Posted by caalip

Hey,

I am trying to make links progressively less alpha. A fading is based on text size. PHP does all the calculations, to produce code similar to the following code. However, the actual HTML here does not seem to work.

Code:

<body style="font-weight:bold;">

<h3>Tags</h3><br />
<a href='http://link' style='font-size: 22pt; filter:alpha(opacity=50); opacity: 0.5; '>Link One</a> 
<a href='http://link' style='font-size: 16pt; filter:alpha(opacity=71.4285714286); opacity: 0.714285714286; '>Link Two</a> 
<a href='http://link/' style='font-size: 8pt; filter:alpha(opacity=100); opacity: 1; '>Link Three</a> 
<a href='http://link/' style='font-size: 14pt; filter:alpha(opacity=78.5714285714); opacity: 0.785714285714; '>Link Four</a> 

</body>

If you test this code in firefox, it works fine, but the filter:alpha, for internet explorer, does not seem to work.

Is there another way to have this same affect?

Thanks,
Grae

Try replacing your css with this :

<a href='http://link' style='font-size: 22pt; filter:alpha(opacity=50); opacity: 0.5; width:100%; display:block;'>Link One</a>

Regards,