Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: PNG Transparency in CSS Background-image/Filter error.

  1. #1
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default PNG Transparency in CSS Background-image/Filter error.

    Please help...

    code below.
    #menubarB{
    margin-top: -15px;
    margin-left: 55px;
    float: left;
    width:465px;
    height:66px;
    background: transparent url(assets/template_images/what-we-do_home.png) no-repeat;
    filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='assets/template_images/what-we-do_home.png', sizingMethod='scale');
    }

    Firefox doesn't understand filter and in ie6 background is shown before the filter and ie needs the filer for the transparency...

    is there no way to do browser detection in csss?

    THanks guys.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    This is a bit tricky. For one thing, if you are using an external stylesheet, the path to the filter's image may have to be either absolute or relative to the page that is using it, rather than relative to the stylesheet. This is because MS filters are in reality javascript, not pure style. If the stylesheet is on the page or the stylesheet and the page both occupy the same relative position on your site, this is not a consideration.

    Now, the real trick is to get IE to do it one way and all others to do it another way, here is one method for that:

    Code:
    #menubarB{
    	margin-top: -15px;
    	margin-left: 55px;
    	float: left;
    	width:465px;
    	height:66px;
    }
    
    body>#menubarB{
    	background: transparent url(assets/template_images/what-we-do_home.png) no-repeat;
    }
    
    * html #menubarB {
    	background-color: transparent;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/template_images/what-we-do_home.png', sizingMethod='scale');
    }
    Notice the red body in the second selector. This must actually be the #menubarB's immediate parent element.

    This method may have problems in IE 7 (if it supports the > selector). IE version specific conditional comments can be used if this is the case but, this means that the the IE part of the style must be in a separate stylesheet on the page itself, inside of a version specific conditional comment block.

    It will have problems in earlier version of IE, those before 5.5 which do not support this filter. If that is a consideration, it can also be solved with version specific conditionals.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Doesn't matter: IE7 supports alpha PNGs. At last.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Twey
    Doesn't matter: IE7 supports alpha PNGs. At last.
    It does matter, if that is true and IE 7 supports the > selector, there will be two 'backgrounds' and these may not overlap exactly or look well together for some other reason.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Ah... I think filters take precedence. Could be wrong, though.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    That was the original problem in IE 6, both were displaying but, either the background took precedence in the stacking order and since it was 100% opaque, obscured the filter and/or the filter's path was invalid. With luck the two would superimpose in IE 7 but, they might add their alpha channels, making it more opaque. If they didn't superimpose, it would be a double image sort of thing.

    It could be like you say but, until one of us gets IE 7, we won't know for sure. I for one am resisting that until it becomes official. It would be hoped that if IE 7 supports the > selector, it would stop supporting the * html hack but, I doubt that will happen. Conditional comments would resolve any problems that might arise.

    I originally said this might be a problem in IE 7. It would be a problem in early (pre 5.5) versions of IE.

    In any case, my solution (earlier in this thread) should work fine for current modern browsers.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Sep 2005
    Posts
    882
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    IE 7 does not support the * html hack, and it will support PNG transparency. If you don't have IE7 I would get it as it is scheduled for release this month

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by blm126
    IE 7 does not support the * html hack, and it will support PNG transparency.
    If that is so, and it supports the > selector. All would be well except for pre 5.5 versions of IE.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey guys, thanks for the help.
    Just to answer a couple things there, the background takes presidence over the filter and on IE browser support the dam thing.

    How we sorted this issue out this is to add the following.
    <!--[if IE]>
    <link href="x_whatwedo_2.css" rel="stylesheet" type="text/css" />
    <!--[else]>
    <link href="x_otherstyle.css" rel="stylesheet" type="text/css">
    <![endif]-->

    I'll propose a new problem though, when using the ie style sheet in one of the divs that contain a form, the filter somehow overlays the form field and you cannot edit it. Any suggestions?

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by vinsza
    How we sorted this issue out this is to add the following.
    <!--[if IE]>
    <link href="x_whatwedo_2.css" rel="stylesheet" type="text/css" />
    <!--[else]>
    <link href="x_otherstyle.css" rel="stylesheet" type="text/css">
    <![endif]-->

    I'll propose a new problem though, when using the ie style sheet in one of the divs that contain a form, the filter somehow overlays the form field and you cannot edit it. Any suggestions?
    I had mentioned conditionals as a way to deal with this. However, the way you have yours set up there may well present a problem for IE 7.

    About your other problem, I would only speculate that giving the form field element a background color might do the trick and/or giving it a higher z-index than the element with the filter. For z-index to have an effect, both elements may have to be either of position:relative or position:absolute. These are the common ways that these type of stacking problems can be dealt with. There may be an optional parameter for the filter that could be set to obviate this problem. There could be another approach. It may be a bug with no workaround.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •