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 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Activate code depending on browser problem

    Hi all

    Hope the following make sence....

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

    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.
    Last edited by bunsco; 10-30-2006 at 02:59 AM.

  • #2
    New Coder
    Join Date
    Jan 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    now to make things worse, ive realised that my links now no longer work when including the div#grandwrapper code in my css file.

    AARRRRHHHH!!!!


  •  

    Posting Permissions

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