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 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Major probelms with Alpha Image Loader

    Hi there.

    I'm currently building a front-end and having a few problems. One is to do with the use of transparent .png images as backgrounds.

    I have a div that has a 24bit transparent .png as a background image. This works fine in IE7 and Firefox, but obviously not in IE6, for which I have created an IE specific stylesheet and added style rules to remove this background and load in the image via the Alpha Image loader filter.

    Firstly here is the code from my HTML

    <link rel="stylesheet" type="text/css" media="all" href="css/modules.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/ie.css" />

    Within the modules CSS stylesheet I have styled the div in which the image will act as a background as such:

    div#main_image
    {
    background : url(../images/modules/Untitled-1.png) no-repeat top left;
    height : 274px;
    position : absolute;
    left : -20px;
    width : 332px;
    }

    Now in the IE stylesheet I have styled the div like such:

    * html div#main_image
    {
    filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='../images/modules/Untitled-1.png', sizingMethod='crop');
    background: none;
    }

    In my mind this should work, yet all I get is a blank div with no background image in IE6.

    Any help resolving this matter would be greatly appreciated.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    You've set background: none; of course you're not going to get an image!? Take that out and the filter will display the image in the background

    I use:

    Code:
    .thediv {
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='resources/images/image.png');
    }
    Last edited by ahallicks; 08-06-2007 at 11:03 AM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder
    Join Date
    Aug 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply.

    However, that doesn't seem to solve the problem.

    Doing what you've suggested simply displays the image with a blue background (not transparent). The reason for knocking the background out is so that it doesn't display in ie, and the filtered image is displayed instead.

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Ah wait a second... you have to do it like this (make it a class, not an id):

    Code:
    .thediv {
    	width: 142px;
    	height: 63px;
    	float: left;
    }
    
    .thediv[class] {
    	background-image: url(images/image.png);
    }
    in your normal stylesheet, so that everything that supports the [class] should display the nice transparent image... then have what I posted above in your IE6 specific stylesheet
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by ahallicks View Post
    You've set background: none; of course you're not going to get an image!?
    Nope, what the OP is using does work perfectly. I’ve used this method in numerous cases. I just happened to have the case today where a client was asking me about no images in IE 6 (and it concerned only those images with alpha image loader). After a while of pondering and not knowing what it could be I found that it was the file path that was different.

    For some reason on my local machine the image path in the alpha image loader had to be relative to the HTML document, not the alternative IE stylesheet which I had in a /css directory. So instead of ../images/blabla.png I had to use images/blabla.jpg.

    Then I suggested my client to use an absolute path and it worked.

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    I've noticed the same thing when using the alpha filter for IE6. If I store my images in a 'resources' folder, and then another folder called 'images', with the stylesheets also within this 'resources' folder I would create a path in the stylesheet as images/image.jpg. But for the ie-stylesheet I have to add /resources/ to the beginning of the path before IE will be able to find it! Very strange indeed as all stylesheets are kept in the same place on the server and the images don't move?

    Do you have a link to this method? It seems a little easier than the one I'm using at the moment which requires [class] to be added to the normal stylesheet. Cheers!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, that's brilliant!

    Thanks a lot for all your help guys.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by ahallicks View Post
    Do you have a link to this method? It seems a little easier than the one I'm using at the moment which requires [class] to be added to the normal stylesheet. Cheers!
    I’ve used it a couple of times on this website to get the semi-transparent dropdown menu background in IE 6. That menu was a challenge to implement - can’t even blame the designer because it was me, haha.

    However, I usually have my styleseets in the root directory so I don’t have these path problems… usually.


  •  

    Posting Permissions

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