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

145 Comments So Far

  1. Wonderful blog! I found it while browsing on Yahoo News.

    Do you have any tips on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Cheers

  2. I do not write many remarks, but I read a few of the remarks here PNG transparency issues | StylizedWeb.

    com. I actually do have some questions for you if it’s okay. Is it just me or does it give the impression like a few of these responses look like they are written by brain dead visitors? :-P And, if you are posting on additional social sites, I would like to keep up with anything fresh you have to post. Would you list of every one of your shared pages like your Facebook page, twitter feed, or linkedin profile?

  3. Fastidious answer back in return of this matter with firm arguments and
    explaining everything concerning that.

  4. I love what you guys are usually up too.
    This sort of clever work and reporting! Keep up the very good
    works guys I’ve you guys to my blogroll.

  5. Attractive portion of content. I just stumbled upon your
    website and in accession capital to assert that I acquire in fact
    enjoyed account your weblog posts. Any way I will be subscribing in your augment or
    even I success you get admission to constantly fast.

  6. I ϳust сouldn’t depart your site prior to suggesting that I actually loved the standard information a person provide to your visitors? Is gonna be back incessantly in order to investigate cross-check new posts

  7. I seriously love your blog.. Pleasant colors & theme. Did you
    make this web site yourself? Please reply back as I’m wanting to create my very own blog and would like to know where you got this from or what the theme is called. Kudos!

  8. I really like it when people come together and share ideas.
    Great website, keep it up!

  9. Very soon this website will be famous among all blogging viewers,
    due to it’s nice articles or reviews

    Have a look at my web blog Axl Hazarika

  10. It’s perfect time to make some plans for the longer term and it is time to be happy. I’ve learn this publish
    and if I may just I want to counsel you few interesting issues or suggestions.
    Maybe you could write next articles relating to this article.
    I want to learn even more things approximately it!

  11. Very nice post. I just stumbled upon your weblog and
    wished to say that I have really enjoyed browsing your blog posts.
    After all I’ll be subscribing to your feed and I hope you write again very soon!

  12. Pingback: 十个最好的CSS HACK | 老李的数码盒子

  13. I delight in, lead to I found exactly what I was looking for.
    You have ended my four day lengthy hunt!
    God Bless you man. Have a nice day. Bye

  14. Very good info. Lucky me I recently found your website
    by chance (stumbleupon). I’ve book marked it for later!

  15. You’re so awesome! I don’t suppose I’ve read through a single thing like this before.
    So nice to find someone with some original thoughts on this subject.

    Seriously.. thank you for starting this up. This website is one thing that’s needed on
    the web, someone with a little originality!

  16. I believe this is among the most significant info for me.
    And i am glad studying your article. But wanna
    commentary on few basic issues, The website taste is ideal, the articles is really nice : D.
    Excellent job, cheers

  17. What’s up to all, it’s actually a good for me to pay a quick visit this
    website, it contains precious Information.

    Feel free to visit my weblog … 専営店 エルメス ポシェット

  18. Your mode of explaining the whole thing in this article is really fastidious,
    every one be capable of easily know it, Thanks a lot.

    Have a look at my blog post – 直営 最高級

  19. Hi there, i read your blog occasionally and i own a similar
    one and i was just wondering if you get a lot of spam comments?

    If so how do you protect against it, any plugin or anything you can recommend?
    I get so much lately it’s driving me insane so any support is very much appreciated.

  20. I k&X6e;оω thiѕ if off topіc but I’m looking intο starting my own blog and waѕ curiοus what all is requіreԁ to get ѕetuρ?
    Ι’m a&X73;suming having a blog liκе yours
    would cost a pretty penny? I’m nоt very internеt saννy so I’m not 100% сertai&X6e;.

    Anу recom&X6d;е&X6e;datіons
    or аdvice would be greatlу apρrеc&X69;аted.
    &X4D;&X61;ny thanks

  21. Amazing! This blog looks just like my old one! It’s on a completely different topic but it has
    pretty much the same layout and design. Superb choice of colors!

    Here is my web blog :: ダウンジャケット 超安

  22. I am sure this paragraph has touched all the internet people,
    its really really nice article on building up new webpage.

  23. Does your site have a contact page? I’m having problems locating it but, I’d like to send you an email.

    I’ve got some recommendations for your blog you might be interested in hearing.
    Either way, great site and I look forward to seeing it expand
    over time.

    my website – ラルフローレン 古着 超安

  24. Does your site have a contact page? I’m
    having a tough time locating it but, I’d like to shoot you
    an email. I’ve got some suggestions for your blog you might be interested
    in hearing. Either way, great site and I look forward to seeing
    it improve over time.

    Also visit my web site :: 指輪 正規

  25. Hi, i think that i saw you visited my web site thus i came to “return
    the favor”.I am trying to find things to enhance my
    site!I suppose its ok to use a few of your ideas!!

    my web page; 折りたたみ財布 新着 (Marsha)

  26. Hi, I log on to your blog daily. Your story-telling style is
    awesome, keep it up!

    my web site … 超安 ジャケット アウトレット (Connor)

  27. I have been surfing online more than 4 hours
    today, yet I never found any interesting article
    like yours. It’s pretty worth enough for me. In my opinion, if all web owners and bloggers made good
    content as you did, the net will be much more useful than ever before.

    Have a look at my webpage :: スニーカー 品質合格

  28. My brother recommended I might like this website.
    He was once totally right. This post actually made my day.

    You can not imagine simply how so much time I had spent for this information!
    Thanks!

    Feel free to visit my website; how to hack a facebook account

  29. It’s very trouble-free to find out any matter on web as compared to
    books, as I found this article at this site.

  30. But іs it possible that some individuals are hindering theiг growth by
    relying too heavilу on their strengths. I live in a senіor community where two thirdѕ of the poρulation iѕ non-active,
    non-social and sometimes grouchу and lonelу. Тhis will provide a record of the
    ѕubconsсious, and will offer plenty of material
    for thought and research.

  31. Gгeetings from Ohio! I’m bored at work so I decided to check out уour wеbsite on my iphone durіng lunch bгeak.
    I enjoy the information you provide herе and can’t wаit to take a look when I get hοme.
    I’m suгprised at hоw quick your blоg loaded on my mobile ..
    I’m not eѵen using WIFI, just 3G .. Anyhow, very goоd blog!

  32. Αs always, thank you for reading, and have a great day~.
    Every day you losе approximate 10 cups of water through breathing, sweating, and еxcretion.
    Hormonal imbalanceѕ ԁuring periods, prеgnancy and menopause аre оther common
    factors which may lead to sagging, dullness and unԁer development of bust.

  33. If the wardrobe is typically the only other feature that takes
    up only the space you require for your clothes and other accessories.
    There was a mirrored door in the middle which wardrobes with tv space had been given over to shelving and
    drawers. Along with standard types of wardrobes are going to be, some days we just don’t want to clash with different styles.
    Double door wooden wardrobes look very nice and provide you with a good wax or perhaps paint.

  34. Hi, i read yoսr blog from time to time anԁ i own a similar one anԁ i was juѕt wondering if you get a lot of spam remarks?
    If so how do you reduce it, any plugin or ɑnything you can
    advise? I get so much lately it’s Ԁriving me mad so anʏ assistance is very much ɑppreciаteɗ.

  35. Definitely consider that that you said. Your favourite justification seemed
    to be at the net the simplest factor to take into accout of.

    I say to you, I definitely get annoyed while other folks think about worries that they just don’t recognise about.
    You managed to hit the nail upon the highest as smartly
    as defined out the entire thing with no need side-effects , other folks could take a signal.
    Will probably be back to get more. Thank you

  36. I blog quite often and I really appreciate your content. This article has really peaked
    my interest. I’m going to take a note of your blog and keep checking for new details about once a week.
    I subscribed to your RSS feed too.

  37. Howdy, i go through your weblog often and i individual a similar 1 and i was
    just questioning if you get a good deal of spam responses?
    If so how do you secure in opposition to it, any plugin or just
    about anything you can recommend? I get so a great
    deal these days it’s driving me mad so any assistance is very considerably
    appreciated.

    Feel free to surf to my web-site – Is Psychic Source Legit?
    (Cecelia)

  38. I love reading through a post that can make men and women think.
    Also, thank you for allowing me to comment!

    Stop by my web page … acne

  39. Excellent, what a weblog it is! This webpage gives useful facts to us, keep
    it up.

  40. This web site truly has all the information I wanted about this subject and didn’t know who to ask.

  41. Oh my goodness! Incredible article dude! Thank you so much, However I am experiencing troubles with your RSS.

    I don’t understand the reason why I cannot join it.

    Is there anyone else getting identical RSS problems? Anyone that
    knows the solution will you kindly respond? Thanx!!

  42. This site really has all the information I wanted about this subject and didn’t know who to ask.

    Also visit my blog – nose job surgery cost uk [Frederic]

  43. Hi there, I do believe your web site mkght be having
    web browser compatibility issues. Whenever I
    look at your site in Safari, it looks fine butt when opening in I.E.,
    it has some overlapping issues. I simply wanted to provide you with a
    quick heads up! Apart from that, wonderful blog!

    Feel free to visit my blog – sexual harassment lawyer irvine (personalinjurylawyeralbany.net)

  44. This is very interesting, You’re an excessively professional blogger.
    I have joined your feed and sit up for looking for more of your
    wonderful post. Also, I have shared your web site in my social networks

  45. There are a few establishments that are able to use their Wi-Fi
    access point to get private information’s about you.

    They’ll then walk away using a free item, while you’re saddled
    with shipping fees along with a refund. When it arrives around the card rankings then which
    is the identical as all other facebook poker chips game titles, with Ace remaining the very best and Two
    to be the lowest.

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>