Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    png to work across IE,FF and safari problem

    Hi all

    sorry in advance for the length of this thread, seeing this is based on a graphic problem, i thought id post this problem on here as well - just hope the following make sence....

    Im trying to execute a simple solution to the png transparancy problem in IE.

    usually, getting it to work in Firefox and safari is a doddle, as they are able to render the file correctly.

    But in my attempt to get it to work in IE, it will not work in firefox or safari.

    i found this solution for IE on the net in answer to a problem on a forum -

    Hi Kevin,

    This theory tends to work well for IE and non IE browsers. Below is the css
    based on the background image of a DIV tag with ID png_background.

    <style type="text/css">
    body {
    height:100%;
    }

    div#png_background {
    width:344px; // specify width
    height:215px; // specify height
    background-image: url(ew.png);
    }
    </style>

    <!--[if IE]>
    <style>
    div#png_background {
    background-image: none;
    filter: progidXImageTransform.Microsoft.AlphaImageLoader(src=ew.png,sizingMethod='scale');
    }
    </style>
    <![endif]-->

    Cheers

    I couldnt get it to work ( if it works at all) as i didnt know how to implement the second part of the code as i didnt know where it went - whether html or css document (the <!--[if IE]> part)


    This is what i've done so far:
    -------------------------------
    (relevant section in external css stylesheet)
    div#grandwrapper {
    background-image: none;
    filterrogid: DXImageTransform.Microsoft.AlphaImageLoader(src=images/urban_background_repeat23.png,sizingMethod='scale');

    #grandwrapper {
    position:relative;
    width:615px;
    height:100%;
    margin: 0 auto;
    min-height:100%;
    background-image:url(../images/urban_background_repeat23.png);

    }
    --------------------------



    Im only versed in very basic css so im missing a lot of hack knowledge and how to implement them.

    i also tried to apply a voice-family mechanism to get IE to pick up on the AlphaImage filter aka the 'holy hack' and to bypass it if its a non IE browser:
    -----------------
    div#grandwrapper {
    background-image: none;
    filterrogidXImageTransform.Microsoft.AlphaImageLoader(src=images/urban_background_repeat23.png,sizingMethod='scale');
    voice-family:"\"}\"";
    voice-family:inherit;
    background-image:url(../images/urban_background_repeat23.png);
    }

    * in the above, it SHOULD read progid and DXImage where appropriate and not icons.
    ------------------



    but that didnt work.

    The solution looks to me to be based on some kind of brower detection.

    as stated before, im a beginner with css and i know practically no javascript - i can just about handle what ive done so far.

    Im so stuck on this that its now become intolerable.

    For the purposes of clarity, i have setup examples of it working in IE and firefox/safari (both using external css stylesheet method with the original and an altered duplicate stylesheet)

    http://www.case236.co.uk/u_web.html (firefox/safari - using my voice-family attempt)

    http://www.case236.co.uk/u_web2.html (IE - extracted from borrowed code)

    I started to attempt the A list apart 'object' based solution but that was too rich for my blood to handle.

    Is there someone out there who can PLEASE PLEASE point me in the right direction in getting this to work.

    I would be most greatful for any help recieved.

  • #2
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts
    Why have you removed <!--[if IE]>?
    <div> - putting your mind in a box since 1997

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    This part of the code:
    Code:
    <!--[if IE]>
    <style>
    div#png_background {
    background-image: none;
    filter: progidXImageTransform.Microsoft.AlphaImageLoader(src=ew.png,sizingMethod='scale');
    }
    </style>
    <![endif]-->
    is the part that makes it work in IE. It's wrapped in conditional comments that will make this code only work in IE (even specific versions of IE).
    Basically how it works is this:
    Code:
    <html>
    <head>
    ....
    <!-- REGULAR EXTERNAL STYLESHEET -->
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <!-- REGULAR INTERNAL STYLSHEET -->
    <style type="text/css">
    ...
    ...
    </style>
    <!-- ADDITIONAL STYLES JUST FOR IE - OVERWRITES REGULAR STYLES (ALSO INTERNAL OR EXTERNAL CSS POSSIBLE) -->
    <!--[if IE]>
    <style type="text/css">
    ...
    </style>
    <link rel="stylesheet" href="styles_IE.css" type="text/css" />
    <![endif]-->
    </head>
    
    <body>
    ....
    ....
    So the conditional comments and their content go after the regular CSS files/stylesheets but before the end of the head section.

    Maybe it's not working because you forgot to add type="text/css" to the IE style tag? But I guess it's because you have a typo in your IE transparency fix. It must read something like:
    Code:
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png',sizingMethod='scale');
    A simple search for "png transparency IE" on the internet brings enlightening results, e.g.: http://alistapart.com/stories/pngopacity/


  •  

    Posting Permissions

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