need workaround for IE transparency problems

Discussion in 'HTML' started by Danny Anderson, Apr 18, 2004.

  1. 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
    Danny Anderson, Apr 18, 2004
    #1
    1. Advertising

  2. Danny Anderson

    mscir Guest

    Danny Anderson wrote:
    > 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 {
    filter:progid:DXImageTransform.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
    mscir, Apr 18, 2004
    #2
    1. Advertising

  3. Toby A Inkster, Apr 18, 2004
    #3
  4. Danny Anderson

    mscir Guest

    Danny Anderson wrote:
    > 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;
    filter:progid:DXImageTransform.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;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/blue_trans2.png",sizingMethod='scale');
    }

    Good Luck,
    Mike
    mscir, Apr 18, 2004
    #4
  5. followup

    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, Apr 18, 2004
    #5
  6. Re: followup (aka failure to proofread)

    On Sun, 18 Apr 2004 12:34:15 -0400, Danny Anderson babbled:

    > 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
    Danny Anderson, Apr 18, 2004
    #6
  7. Danny Anderson

    Whitecrest Guest

    Re: followup (aka failure to proofread)

    In article <>,
    says...
    > 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.

    --
    Whitecrest Entertainment
    www.whitecrestent.com
    Whitecrest, Apr 18, 2004
    #7
  8. Re: followup (aka failure to proofread)

    Whitecrest wrote:

    > In article <>,
    > says...
    >> 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.


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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Apr 18, 2004
    #8
  9. Danny Anderson

    Spartanicus Guest

    Re: followup

    "Danny Anderson" <> wrote:

    >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
    Spartanicus, Apr 18, 2004
    #9
  10. Danny Anderson

    Spartanicus Guest

    Re: followup (aka failure to proofread)

    "Danny Anderson" <> wrote:

    >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.

    --
    Spartanicus
    Spartanicus, Apr 18, 2004
    #10
  11. Danny Anderson

    mscir Guest

    Danny Anderson wrote:
    > 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
    mscir, Apr 18, 2004
    #11
  12. Danny Anderson

    Nik Coughin Guest

    Danny Anderson wrote:
    > 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/
    Nik Coughin, Apr 18, 2004
    #12
  13. Danny Anderson

    Neal Guest

    Re: followup (aka failure to proofread)

    On Sun, 18 Apr 2004 20:10:55 +0100, Spartanicus <> wrote:

    > "Danny Anderson" <> wrote:
    >
    >> 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.
    >



    Spartanicus, in my Opera M2, thread is intact even with subject editing.
    Is the problem on your end??
    Neal, Apr 19, 2004
    #13
  14. Danny Anderson

    Spartanicus Guest

    Re: followup (aka failure to proofread)

    Neal <> wrote:

    >> "Danny Anderson" <> wrote:
    >>
    >>> 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.

    >
    >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.

    --
    Spartanicus
    Spartanicus, Apr 19, 2004
    #14
  15. 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
    Danny Anderson, Apr 20, 2004
    #15
  16. Danny Anderson

    Nik Coughin Guest

    Danny Anderson wrote:
    > 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
    Nik Coughin, Apr 20, 2004
    #16
  17. Danny Anderson

    mscir Guest

    Danny Anderson wrote:
    > 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
    mscir, Apr 20, 2004
    #17
  18. "mscir" <> wrote in message
    news:...
    > Danny Anderson wrote:
    > > 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
    >


    Thanks guys- I will work on it some more.

    Danny
    Danny Anderson, Apr 20, 2004
    #18
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Wayfarer
    Replies:
    4
    Views:
    798
  2. K
    Replies:
    2
    Views:
    4,585
    Victor Bazarov
    Oct 6, 2004
  3. HelpPlease

    Datarow can't bind to datagrid...I need a workaround

    HelpPlease, Feb 11, 2004, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    717
    Marshal Antony
    Feb 12, 2004
  4. James Marshall

    Need workaround for regex bug in 5.8.6

    James Marshall, Nov 9, 2005, in forum: Perl Misc
    Replies:
    9
    Views:
    167
    Ilya Zakharevich
    Nov 10, 2005
  5. pbd22
    Replies:
    0
    Views:
    77
    pbd22
    Oct 18, 2007
Loading...

Share This Page