SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast catch's Avatar
    Join Date
    Sep 2007
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    alphaimageloader help

    I am trying to get these transparent buttons to work in ie6 by using the alphaimageloader filter, and it doesn't seem to be working.

    any suggestions?

    also here is the link > http://www.chrispacheco.net/work/palser/

    thx for any help!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First you have an invalid character that should not be there :
    Code:
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/backgrounds/nav_off.png',sizingMethod=scale);
    The background image declaration should be hidden from IE6 so that it does not apply the background, only the transformed image on top. There is also the issue of link clickability with this method, as outlined in this article.

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

    You will also have to float the anchor as "layout" needs to be applied before it will work.

    This is working:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }
    
    #header {
        height: 135px;
        border-bottom: 2px solid #bfbfbf;
        background: #dedad2;
    }
    
    #nav_container {
        width: 100&#37;;
        height: 106px;
          background: url(http://www.chrispacheco.net/work/palser/img/backgrounds/nav_bg.jpg) #fff repeat-x;
    }
    
    ul#navlist {
        margin: 0;
        padding: 40px 0 25px 25px;
    }
    
    #navlist li {
        display: inline;
        list-style-type: none;
    }
    
    #navlist a:link, #navlist a:visited {
        height: 20px;
        padding: 5px 10px;
        color: #fff;
        text-decoration: none;
        float:left;
        margin:0 2px 0 0;
    }
    
    html>body #navlist a{    background: url(http://www.chrispacheco.net/work/palser/img/backgrounds/nav_off.png);}
    * html #navlist a{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://www.chrispacheco.net/work/palser/img/backgrounds/nav_off.png',sizingMethod='scale');
    }
    
    
    #navlist a:hover {
        color: #fff;
        background-color: #0e1727;
        text-decoration: none;
    }
    
    </style>
    <script type="text/javascript" src="js/swfobject/swfobject.js"></script>
    </head>
    <body>
    <div id="header"> </div>
    <div id="nav_container">
        <ul id="navlist">
            <li id="active"><a href="#" id="current">Item one</a></li>
            <li><a href="#">Item two</a></li>
            <li><a href="#">Item three</a></li>
            <li><a href="#">Item four</a></li>
            <li><a href="#">Item five</a></li>
        </ul>
    </div>
    <div id="main_content"> </div>
    <div id="sidebar"> </div>
    <div id="footer"> </div>
    </body>
    </html>
    Note that the path to the image is from the html page and not the css file as per usual.

    The links are clickable in the code above as there are no position:relatives getting in the way.

  4. #4
    SitePoint Enthusiast catch's Avatar
    Join Date
    Sep 2007
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you paul, that seems to work

    will this invalidate my css stylesheet? what's the best way to incorporate this method?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes it is proprietary IE code (invalid) but it will do no harm. If it worries you, you could put it inside conditional comments and it will be hidden from the validator so that the page will validate. However, all it does is hide it from the validator so seems little point to me

    There is no other way to do it in IE6 so either you use it or you don't

  6. #6
    SitePoint Enthusiast catch's Avatar
    Join Date
    Sep 2007
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thank you so much, i appreciate your help


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
  •