SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Png Fix - Rollover button

    Hey folks...ive messing around for a while now and i cant get a png rollover button work in ie 6 or below. Ive tried numerous combinations of scripts and arrangemnets but im just going nowhere fast.....my css skills are rather basic (some people on this forum may know that of me!)

    the html bit i have;

    HTML Code:
    <div id="offer"><a href="mailinglist.php" title"Register for Offers" alt="Register for Ofers" class="rolloversticker">Register for Offers</a></div>
    ...and the css ive got

    HTML Code:
    	 a.rolloversticker:link,a.rolloversticker:visited, a.rolloversticker:active{
    	 background:url(../sticker.png) no-repeat; 
    }
    	 a.rolloversticker:hover{
    	 background-position:-131px 0;
    
    }
    
    * html #offer {
    
             
            background:none; 
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../sticker.png'); zoom:1.0}

    With alphimageloader ive used it above on the div, but ive also tried it on a the class with link, hover etc etc

    Could someone help?

    Many thanks in advance

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't manipulate a background image position when using the alpha image loader filter because it doesn't work like that. The alpha image loader has no background properties like repeat or positioning.

    You are also addressing the wrong element as you should be targeting the anchor and not #offer.

    You will have to supply IE with the rollover image on hover :
    e.g. * html #offer a:hover{etc....}

    Remember also that the path to the png image is relative to the html page and not the css file as is usually the case.

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul (again!)

    Since i did the post i read another article and realised that i couldnt use position

    In the css ive made the link absolute. For the rollover class i have;

    HTML Code:
    	.rolloversticker{
    	display:block;
    	width:131px;
    	height:133px;
    text-indent:-9999px;
    	display: block;
    }
    ....and for the image rollover i have

    HTML Code:
    * html .rolloversticker a:link, .rolloversticker a:visited, .rolloversticker a:active{
    background:none; 
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.../../stickeron.png',sizingMethod='scale'); }
    
    * html .rolloversticker a:hover {
    background:none; 
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.../../stickeroff.png',sizingMethod='scale'); }
    ....however this didnt show anything...

    If i used this as well;

    HTML Code:
    	 a.rolloversticker:link,a.rolloversticker:visited, a.rolloversticker:active{
    	 background:url(../sticker.png) no-repeat; 
    }
    	 a.rolloversticker:hover{
    	 background-position:-131px 0;
    
    }
    ...it functions, however i dont have the transparent background (as it obviously uses the initial css rule rather than the alpha image loader)..

    any ideas?

    many thanks

    b

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Which is it?
    Code:
     a.rolloversticker:link
    or:

    Code:
    rolloversticker a:link,
    They are still addressing different elements.

    I'm assuming it should be this:
    Code:
    * html a.rolloversticker, 
    {
        background:none!important; 
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.../../stickeron.png',sizingMethod='scale'); 
    }
    
    * html a.rolloversticker:hover {
        background:none; 
       filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.../../stickeroff.png',sizingMethod='scale'); 
    }
    Note the changes in bold.

    You should also note that you have used the star selector for each comma separated item.

    e.g.
    Code:
    * html a.rolloversticker:link, 
    * html a.rolloversticker:visited,
    * html a.rolloversticker:active{
        background:none; 
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.../../stickeron.png',sizingMethod='scale'); 
    }
    Each comma separated value has no relation to the other elements in that list. Only the first item would have been given only to ie6 but all the rest would go to other browsers as well.

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    412
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul

    Ive done what you suggested
    HTML Code:
    * html a.rolloversticker, 
    {
        background:none!important; 
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.../../stickeron.png',sizingMethod='scale'); 
    }
    
    * html a.rolloversticker:hover {
        background:none; 
       filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.../../stickeroff.png',sizingMethod='scale'); 
    }
    and then changed the none star selected css to the same and it works fine...

    many thanks (ive got another query on its way!)

    b


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
  •