need workaround for IE transparency problems

[Danny Anderson]

Hola, html folk-

I have been trying to get my transparent divs to work under IE, and I am
ready to give up-- I just haven't been able to get the filter to work for
me.

here is the page:
http://www.cs.odu.edu/~danders/cs411/members.php

and here is an early version of what it should look like:
http://www.bturnip.com/cs411/screenshot_for_debbie.png



I have tried a variety of filter hacks, but I not getting something
right. I would like now to try a different strategy. For non-IE broswers, I
would like to keep the transparent div. For IE, instead of the nice
transparent blue, I would like to just use a solid blue.

I would like to do that using just one stylesheet- how can I do that?

Thanks,
Danny

 

[mscir]

Hola, html folk-
I have been trying to get my transparent divs to work under IE, and I am
ready to give up-- I just haven't been able to get the filter to work for
me.
here is the page:
http://www.cs.odu.edu/~danders/cs411/members.php
and here is an early version of what it should look like:
http://www.bturnip.com/cs411/screenshot_for_debbie.png
I have tried a variety of filter hacks, but I not getting something
right. I would like now to try a different strategy. For non-IE broswers, I
would like to keep the transparent div. For IE, instead of the nice
transparent blue, I would like to just use a solid blue.
I would like to do that using just one stylesheet- how can I do that?
Thanks,
Danny

Not a solution but possible progress:

..blue_trans_box {
filterrogidXImageTransform.Microsoft.Alpha(opacity=33);
background-image: url('blue_trans2.png');
height: 320px;
width: 800px;
font-family:verdana, arial, helvetica, sans-serif;
border:solid 1px #555;
height: 300px;
width: 800px;
}

Unfortunately the menubox and any text within the div is affected. I
couldn't figure out how to get them to display normally again but maybe
you can.

Good Luck,
Mike

 

[Toby A Inkster]

I have tried a variety of filter hacks, but I not getting something
right. I would like now to try a different strategy.

Try this one:
http://www.goddamn.co.uk/tobyink/Documents/html_tutorial/translucency/example.html

 

[mscir]

I have been trying to get my transparent divs to work under IE,
http://www.bturnip.com/cs411/screenshot_for_debbie.png

<snip>

See how this looks to you, it looks like it's working in IE6, Netscape
7.1, Firefox 0.8, although the shade is somewhat different in IE vs.
Netscape - you'll probably want to take a close look at it.

At opacity=80 elements within the blue_trans_box div don't look too
faded. If this approach works for you, you might try saving the
background graphic with higher opacity then using opacity=90 or higher,
if you can do that the slight amount of fading of elements within the
blue_trans_box div might not be detectable.

..blue_trans_box {
height: 300px;
width: 100%;
font-family:verdana, arial, helvetica, sans-serif;
border:solid 1px #555;
filterrogidXImageTransform.Microsoft.Alpha(src='blue_trans2.png',sizingMethod='crop',opacity=80);

background-image: url('blue_trans2.png');
}

..menubox {
top: 10px;
margin-left: 5px;
float: left;
padding: 3px;
border: 0px;
}

/////////////////////
this section deleted:

* html .blue_trans_box {
background-image: none;
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src="./images/blue_trans2.png",sizingMethod='scale');
}

Good Luck,
Mike

 

[Danny Anderson]

Mike & Toby,
Thanks a ton for the help. Mike especially for plugging away with not
one, but two responses!

I fooled around with both methods for a couple hours this morning. What I
finally did was spec a gif for IE and a png for everybody else using the
star hack. For others who may be following this thread, here is just one
of many links to info about the star hack:
http://centricle.com/ref/css/filters/tests/star_html/


here is the css for my div box:
..blue_trans_box
{
width: 100%;
font-family:verdana, arial, helvetica, sans-serif;
border:solid 1px #555;
background-image: url('./images/blue_trans2.png');
/* IE can't handle a transparent png, so it needs special help */
* background-image: url('./images/blue_trans_ie.gif');
}

This seems to do the trick. Mozilla, Galeon, Firefox, and Opera all get
the png and IE the sweet transparent png, while IE gets the gif. Not the
best solution,but the best solution would be for IE to handle the png
"correctly".

 

[Danny Anderson]

This seems to do the trick. Mozilla, Galeon, Firefox, and Opera all get
the png and IE the sweet transparent png, while IE gets the gif. Not the
best solution,but the best solution would be for IE to handle the png
"correctly".

Umm, that should read that Mozilla, Galeon, Firefox and Opera all get the
sweet transparent png. IE gets the less-sweet gif.

Danny

 

[Whitecrest]

Umm, that should read that Mozilla, Galeon, Firefox and Opera all get the
sweet transparent png. IE gets the less-sweet gif.

Man that sucks for the 540,000,000 IE users..... but it is reality so
we deal with it.

 

[Toby A Inkster]

Man that sucks for the 540,000,000 IE users..... but it is reality so
we deal with it.

It's not really so noticeable unless you compare the two side-by-side.

 

[Spartanicus]

followup

No it's not, you posted a new message thus causing the context to be
lost. Kindly read the faq on posting rules.

 

[Spartanicus]

Umm, that should read that Mozilla, Galeon, Firefox and Opera all get the
sweet transparent png. IE gets the less-sweet gif.

This time you attempted to follow up, but either your or your news
reader screwed up causing it yet again to be placed out of context.

 

[mscir]

Hola, html folk-
I have been trying to get my transparent divs to work under IE, and I am
ready to give up-- I just haven't been able to get the filter to work for
me.

<snip>

Changing the transparency of the png in Photoshop and then turning up
opacity to 90 makes the images almost identical in IE6 & Netscape 7.1.

http://mscir.tripod.com/transparent/

It doesn't quite match your screenshot, but if you work with this
approach you might get it to look decent on most browsers.

Good Luck,
Mike

 

[Nik Coughin]

Hola, html folk-

I have been trying to get my transparent divs to work under IE, and I
am ready to give up-- I just haven't been able to get the filter to
work for me.

here is the page:
http://www.cs.odu.edu/~danders/cs411/members.php

and here is an early version of what it should look like:
http://www.bturnip.com/cs411/screenshot_for_debbie.png



I have tried a variety of filter hacks, but I not getting something
right. I would like now to try a different strategy. For non-IE
broswers, I would like to keep the transparent div. For IE, instead
of the nice transparent blue, I would like to just use a solid blue.

I would like to do that using just one stylesheet- how can I do that?

Thanks,
Danny

Do you mean like:

http://homepages.ihug.co.nz/~nrkn/new/

 

[Neal]

This time you attempted to follow up, but either your or your news
reader screwed up causing it yet again to be placed out of context.

Spartanicus, in my Opera M2, thread is intact even with subject editing.
Is the problem on your end??

 

[Spartanicus]

Spartanicus, in my Opera M2, thread is intact even with subject editing.
Is the problem on your end??

Apologies to Danny, I indeed had forgotten to change a setting in my
reader.

 

[Danny Anderson]

Hola, html genius folk!

Thanks a ton for all the suggestions so far. I have been trying out all
the angles. I have decided that the transparent gif won't work- it looks
really bad on older, marginal displays.

I have a solid background in the wings if I can't work the bugs out.

http://www.cs.odu.edu/~danders/cs411/members.php

The transparency looks gorgeous in IE, but the the first 4 out of 8 links
in the memberbox are dead. Any suggestions??

As always, thanks for the time,
Danny

 

[Nik Coughin]

Hola, html genius folk!

Thanks a ton for all the suggestions so far. I have been trying out
all the angles. I have decided that the transparent gif won't work-
it looks really bad on older, marginal displays.

I have a solid background in the wings if I can't work the bugs out.

http://www.cs.odu.edu/~danders/cs411/members.php

The transparency looks gorgeous in IE, but the the first 4 out of 8
links in the memberbox are dead. Any suggestions??

As always, thanks for the time,
Danny

http://blog.tom.me.uk/2003/07/23/boie6selecta.php

 

[mscir]

http://www.cs.odu.edu/~danders/cs411/members.php
...the the first 4 out of 8 links in the memberbox are dead. Any suggestions??

<snip>

Strange that the links don't work. You might try these:

- remove './' from hrefs
- put link styles into a stylesheet

<style type="text/css">
a { text-decoration: none; }
</style>

<a href="index.php">Home</a>
<a href="members_ray.php">Dennis Ray</a>

Mike

 

[Danny Anderson]

suggestions??
<snip>

Strange that the links don't work. You might try these:

- remove './' from hrefs
- put link styles into a stylesheet

<style type="text/css">
a { text-decoration: none; }
</style>

<a href="index.php">Home</a>
<a href="members_ray.php">Dennis Ray</a>

Mike

Thanks guys- I will work on it some more.

Danny