SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transparent Layer

    I have a layer called cloak, which has a background image of a png with alpha transparency. I use this because CSS transparency then travels through all subsequent layers, and that's not what I want.

    This works brilliantly in FF, but IE just gives me a solid image: no transparency. *sigh*

    So, we put in this for IE:

    Code:
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='admin/s50.png',sizingMethod='scale');
    And it works.

    Except... If we have the original

    Code:
    background-image: url(http://tcv3/admin/s50.png);
    Then that shows up as a solid background again.

    I have two css files: the first one gets included for all pages. The second is only included if the browser is IE. Like so:

    Code:
    <link rel="stylesheet" type="text/css" href="<?= $theme ?>styles.css">
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="<?= $theme ?>iestyles.css">
    <![endif]-->
    So, given all of this, how can I "turn off" the background-url?

    Thanks,
    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE7 doesn't need the filter.

    Set the background-image property to none.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,822
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    As Kravvitz has already said or something along these lines:

    Code:
    * html #test {
    background:#000;/* for ie5 and 5.5*/
    bac\kground:transparent;/* for ie6*/                        
    f\ilter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fiftypercent.png', sizingMethod='scale');/* for ie6 only*/        
    }

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, doesn't the filter work in IE5.5 too?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,822
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Paul, doesn't the filter work in IE5.5 too
    Yes it does but I was just being lazy as it doesn't work in ie5 so I bypassed both

    Ie5 should really be filtered out instead and I should have used something even uglier like this.
    Code:
    /* keep these 2 together or hack doesn't work for ie5*/
    * html #main {
    background:#000;/* for ie5*/
    voice-family: "\"}\""; voice-family:inherit;
    }
    * html #main{/* for ie5.5 and 6*/        
        background:transparent;                
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fiftypercent.png', sizingMethod='scale');
    }
    /* end hack*/
    Its at times like these that conditional comments would be neater

  6. #6
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You guys ROCK! That worked! Thank you!

    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •