SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    canada
    Posts
    331
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    What are IE6 transparency fix methods?

    Is there a website that documents all the different methods for correcting IE6 transparency issues.

    I have tried several different ways but the don't seem to work.

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    In essence there is only one way to fix IE6's transparency issues and that is to use the alpha image loader filter.

    There are however many javascript fixes which will apply the filter automatically for you and the one I use if I have a lot of images to use is here.

    The alpha image loader is not a substitute for the background property and has no position or repeat properties and uses special attributes that will crop scale or revert to image size.

    The latest version of the twin helix fix linked to above addresses these issue via JS so that you can use repeat and position. (Many other js fixes do not allow this.)

    The main problem is that when you apply a transparent image to a positioned element (relative or absolute) then links in that element become un-clickable. You need first to position the element and then nest an inner non-positioned element at that point and then apply the image to that inner element.

    Therefore you need to design with this in mind if you want to support ie6.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    canada
    Posts
    331
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You need first to position the element and then nest an inner non-positioned element at that point and then apply the image to that inner element.

    Therefore you need to design with this in mind if you want to support ie6.
    Hi Paul,

    Do you know of a working example that I can examine?

    Thanks.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Like this
    Code:
    <a href="#" style="position:relative;"><span style="background-image:(pngImage.png);">text</span></a>
    Inline styles for example only
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by drakke View Post
    Hi Paul,

    Do you know of a working example that I can examine?

    Thanks.
    This is an old example.

    It's best not to have the anchor as the parent because the position:relative in the anchor will cause problems also.


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
  •