StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

PNG transparency issues

If you are CSS coder, you've probably ran in to png transparency problems many times. Even Microsoft is having problems with it http://runonce.msn.com/runonce2.aspx open in IE6. So I'll tell you few problems and solutions I've handled so far.

First one is if you need just simple transparent image, without some special needs for example backgrounds etc. The solution would be png fix. I've used it many times but it has lots of faults, for example with padding, margins and absolute positioning. Sometimes i can mess up the rest of your JavaScript files, but anyway very useful script. You can download it here http://homepage.ntlworld.com/bobosola/pngfix.js and just include it in your <head> tag

PNG

  1. <!--[if lt IE 7.]>
  2. <script defer type="text/javascript" src="pngfix.js"></script>
  3. <![endif]-->

The second one can partly handle issues from first and it's pure CSS solution. I mostly use this for backgrounds, because if your path for a background is from CSS file then png fix can't handle it.

PNG

  1. .someelement {
  2. background-image: url(images/image.png);
  3. }
  4.  
  5. * html .someelemen {
  6. background-color: #333;
  7. back\ground-color: transparent;
  8. background-image: url(images/blank.gif);
  9. filter: progid:DXImageTransform.Microsoft.
  10. AlphaImageLoader(src="images/image.png", sizingMethod="scale");
  11. }
  12.  

I found this very useful, and also when you add some hover effects for example some color or other image. You can see live example here
NOTE: This simple hover is just example and it doesn't work in IE6

  1. .someelement:hover {
  2. background: #333;
  3. }
  4.  
  5. .someelement:hover {
  6. background-image: url(images/image2.gif);
  7.  
  8. }
  9.  

Only problem I had with this was with <a> tag, link just don't work (when it's in div with this kind of background) and i don't know why (talking again for IE6). And only solution i could think of was to place another absolute div over it for the links, content etc... Yes i know it's not elegant but it works if content is not dynamic.

Luckily more and more people are starting to use IE7, and i must say i have recently switched too, i had to have IE6 because of testing my code and when i found out for Multiple IE program I switched immediately ;)

Leave a comment on Stylized Web Have some feedback? Leave a comment

177 Comments So Far

  1. I went over this site and I think you have a lot of excellent information, saved to faves.

    Feel free to surf to my web blog … best scar treatment;
    Estella,

  2. A hoover is the most reliable of cleaning resources;
    it can be the costlier. You can find various
    sorts of vacuum with various characteristics. So prior to buying a
    premier hoover make sure you understand what sort of hoover is
    greatest for your own needs.

    Determing the best vacuum can be vexing. To help make issues better you should
    be aware of what the various types of vacuum are, what the primary qualities it is possible to find on a hoover,
    and want you kind of flooring you’re going to be utilizing a vacuum-cleaner on.

  3. Hello! I’m at workk surfing around your bloog from my new iphone!

    Just wanted to saay I love reading your blog and look forward tto all your posts!
    Carry on tthe superb work!

  4. I relish, lead to I found just what I used to be taking a look for.

    You’ve ended my four day long hunt! God Bless you
    man. Have a great day. Bye

  5. continuously i used to read smaller content that also clear their motive, and that is also happening with this
    article which I am reading here.

  6. Hi there everyone, it’s my first visit at this site, and
    paragraph is truly fruitful in favor of me, keep up posting such posts.

  7. Simply want to say your article is as astonishing.
    The clarity in your post is simply excellent and i could assume you’re an expert on this subject.
    Fine with your permission let me to grab your RSS feed to
    keep up to date with forthcoming post. Thanks a million and please carry on the
    gratifying work.

  8. Attractive section of content. I simply stumbled upon your website
    and in accession capital to say that I acquire
    actually loved account your weblog posts. Any way I will be subscribing in your feeds or even I fulfillment you get right of entry to consistently fast.

  9. Hi, I would like to subscribe for this blog to obtain hottest updates, so where can i do it please assist.

  10. Magnificent beat ! I would like to apprentice while you amend your
    website, how can i subscribe for a blog site? The account helped me a acceptable deal.
    I had been a little bit acquainted of this your broadcast provided bright clear idea

  11. My relatives all the time say that I am killing
    my time here at web, but I know I am getting familiarity every day by reading thes good content.

  12. Howdy! Do you use Twitter? I’d like to follow you if that would be
    okay. I’m definitely enjoying your blog and look forward to new
    updates.

  13. Wonderful beat ! I would like to apprentice while you amend your web site,
    how could i subscribe for a blog web site? The account helped me a acceptable
    deal. I had been tiny bit acquainted of this your broadcast provided bright clear idea

    Check out my web page – buy like facebook

  14. I am usually to blogging for cash and i really love your
    written content. The article has really speaks my interest.

    I am going to bookmark your site and keep checking for brand new information.

    My blog home remedies for acne scars (Jocelyn)

  15. If you are decorating for a casual look you are able to
    decorate accordingly by a little biit of fabric painting
    and other simple items to mwke the bag look cool, if you happen tto be decorating for slecial events you may consider making
    some detailed focus on them with stones and other graand items.
    “Mom the other day did I hear you tell Max you was up. You can fin small, medium and huge camera bags in addition to hobo-style bags.

  16. Quality content is the crucial to be a focus for the viewers to pay
    a visit the web site, that’s what this site is providing.

  17. Hi, I desire to subscribe for this webpage to get most up-to-date updates, thus where can i do it please help.

  18. Ciao ​​, mi piace leggere tutti posta . I
    volevo scrivere un piccolo commento a sostenervi .

  19. Hello to every body, it’s my first visit of this website; this webpage carries remarkable and truly excellent material in support of readers.

  20. Many pharmacies only offer the best sellers such as Viagra.
    Before diving into the world of web development, get in terms with jargons of the industry and there is much more to consider than determining price.
    Handcoders can be used for more involved projects that require PHP, ASP or Custom CMS Development or actual
    programming.

    Feel free to visit my homepage: Jacksonville Sunshine State Site Design

  21. Hello! I simply wish to give you a huge thumbs up for your great information you
    have got right here on this post. I am coming back to your
    site for more soon.

  22. I was suggested this web site by my cousin. I am not sure whether this post is written by him as
    no one else know such detailed about my problem.
    You’re amazing! Thanks!

  23. Wow, amazing weblog format! How long have you ever been running a blog for?
    you make blogging glance easy. The overall glance of your web site is excellent, let alone the
    content material!

  24. Hey There. I found your blog using msn. This is a really well written article.
    I’ll make sure to bookmark it and return to read more of your useful information. Thanks for
    the post. I will certainly return.

    My website; 24 Hour AC Repair Gilbert AZ

  25. Review this short article for some fantastic e-mail promoting pointers.

    Believe it youu aren’t, there are numerous online choices foor creating a free small company website.
    This process is additionally some times called
    banner ads.

  26. Choose a soap that will cleanse your body and not just perfume it a
    little bit. With the growing trend of online
    shopping, more and more websites are emerging
    with quality hair care products for sleek and shiny hair. But who has the
    time to go through all that information.

    Here is my homepage; top skin products for african american women

  27. Advanced Plastic Surgery is here to celebrate beauty with its
    state of the art facilities and innovative services such as dermabrasion,
    BOTOX Cosmetic, body surgeries, and the latest Vi – Peel.
    In recent years the term “mommy-makeover” has become more common. The various types of
    plastic surgery on the face are:.

    my blog :: nose job kate middleton

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>