www.webdeveloper.com
Results 1 to 8 of 8

Thread: Is it possible to get this to look good in IE 6? transparent PNGs

  1. #1
    Join Date
    Apr 2004
    Posts
    118

    Is it possible to get this to look good in IE 6? transparent PNGs

    See: http://www.concrete-creative.com/buttons/buttons.html

    HTML:
    Code:
    <a class="button1" href="#"><span>Gray on White</span></a>
    CSS:
    Code:
    a.button1 {
        background: transparent url('images/gray_ends.png') no-repeat scroll top right;
    	font-family: Helvetica, Verdana, Arial, sans-serif;
        color: #000000;
        display: block;
        float: left;
        font: normal 11px arial, sans-serif;
        height: 22px;
        margin-right: 6px;
        padding-right: 8px; /* sliding doors padding */
        text-decoration: none;
    }
    a.button1 span {
        background: transparent url('images/gray_body.gif') no-repeat;
        display: block;
        line-height: 12px;
        padding: 5px 0 5px 8px;
    }
    I would like to have the corners be transparent on IE6 and up.
    I've tried so many things with no luck. Maybe I'm doing it wrong, but I tried Microsoft's alpha transparency class, swapping a gif for anything IE6 or older, SuperSlight, among others... does anyone have a solution that actually WORKS? Seems like swapping a gif for the png would be simple, but I can't get it to work.

    Thanks in advance!

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428

  3. #3
    Join Date
    Apr 2004
    Posts
    118

    That doesn't seem to work...

    check it now: http://www.concrete-creative.com/buttons/buttons.html

    It does seem to be calling the new stylesheet for IE6, but it's not rendering it correctly on IE6. Help? Here's the CSS for the new IE6-only stylesheet:

    Code:
    a.button1 {
    	font-family: Helvetica, Verdana, Arial, sans-serif;
        color: #000000;
        display: block;
        float: left;
        font: normal 11px arial, sans-serif;
        height: 22px;
        margin-right: 6px;
        padding-right: 8px; /* sliding doors padding */
        text-decoration: none;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/gray_ends.png');
    	background:none;
    }
    a.button1 span {
        display: block;
        line-height: 12px;
        padding: 5px 0 5px 8px;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/gray_body.png');
    }

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    IE6 has another bug: it doubles the left/right margins in case of floated elements. The solve is as simple as stupid (same as the bug ): give your element again a display:inline

  5. #5
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    42
    Try using PNG8s as they're more transparent than you think.

  6. #6
    Join Date
    Apr 2004
    Posts
    118

    Still no...

    I took both of your advice - added display: inline and used PNG8 images. still not looking transparent in IE6.

    However, you at least gave me an idea... instead of using js to swap the pngs for gifs for IE6, I'll use your code to swap them in the stylesheet. no alphaimageloader or anything, just a simple swap. it doesn't look great as a gif, but it's better than spending 5 more hours on this.

    thanks!

  7. #7
    Join Date
    Jan 2010
    Location
    Cambridge, UK
    Posts
    42
    They need to be specific PNG8 images though, as not all programs support the alphatransparency on them.

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by chausfeld View Post
    I took both of your advice - added display: inline and used PNG8 images. still not looking transparent in IE6.

    However, you at least gave me an idea... instead of using js to swap the pngs for gifs for IE6, I'll use your code to swap them in the stylesheet. no alphaimageloader or anything, just a simple swap. it doesn't look great as a gif, but it's better than spending 5 more hours on this.

    thanks!
    Should work, it worked for me when i designed my company's site.
    Quote Originally Posted by iandevlin
    They need to be specific PNG8 images though, as not all programs support the alphatransparency on them.
    No. It works with PNG24 as well

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles