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

232 Comments So Far

  1. Besides spray tan, you can also get lotions, gels, and
    creams that are easy to apply. The first utilizes an airbrush tanning booth the customer stands in while the solution is
    sprayed on the body. The instant will give
    you color as soon as you step out of the booth and the clear will develop over
    time (great for those of you who like to have a spray on your lunch
    break).

    Feel free to surf to my blog … chloe sims scunci ponytail holders with hair

  2. What’s up everyone, it’s my first pay a visit
    at this website, and paragraph is actually fruitful in support of me, keep up posting such content.

  3. I read a lot of interesting content here. Probably you spend a lot of time writing,
    i know how to save you a lot of work, there is an online tool that creates readable, SEO friendly posts in minutes, just
    search in google – laranitas free content source

  4. Hi superb blog! Does running a blog like this require a great deal of work?
    I’ve absolutely no expertise in coding however I had been hoping
    to start my own blog soon. Anyways, if you have any recommendations or tips for new
    blog owners please share. I know this is off topic nevertheless
    I simply wanted to ask. Kudos!

  5. I have learn ѕeveral jսst гight stuff ɦere. Ɗefinitely ѵalue bookmarking
    ffor revisiting. ӏ surprise Һow so mսch effort you plɑcе
    tο create ѕuch a fanyastic informative
    site.

    mу web ρage … fantage free membership codes

  6. Hi exceptional blog! Does running a blog similar to this require a great deal of work?

    I’ve absolutely no expertise in programming however I had been hoping to start my own blog soon. Anyway, should you have any ideas or tips for new blog
    owners please share. I understand this is off subject nevertheless I just
    needed to ask. Kudos!

    Here is my blog google

  7. I like the valuable information youu provide in your articles.
    I will bookark your blog and check again here frequently.
    I’m quite sure I will learn lots of new stuff right here!
    Best of luck for the next!

  8. magnificent put up, very informative. I ponder why the opposite specialists of this sector don’t notice this.
    You should proceed your writing. I’m sure, you’ve a huge
    readers’ base already!

    My web site; Ver el sitio web (Major)

  9. After looking over a number of the blog posts on your website, I
    truly like your way of writing a blog. I saved as a favorite it to my bookmark site list and will be checking back soon. Please check out my web site
    too and let me know how you feel.

    Feel free to visit my web-site :: Visitar este sitio
    aqui (Joni)

  10. The days of peeling your vegetables with a knife have been over since we
    have been blessed with the peeler. You may wonder what they can offer you that a regular oven doesn’t have,
    and that would be a greater precision in what you’re
    cooking, meaning no failed recipes or undercooked food. And so it
    was with Julia’s enamel sauce pan which she bought in Paris in the
    1940s and used up until the 1990s.

    Here is my web page: swerving

  11. You can really help most of your clients by helping them use financial statements as a basis for making better
    business decisions. They will do all the talking for you with the agent.

    Every year, thousands of vacancies open up in the public sector.

    Here is my web blog … Boca Raton CPAt testing

  12. Our products are results of world class herbal Veterinary formulations which are being prescribed
    with a stamp of assurance, consistency and efficacy on quality.
    The osmotic pressure will unnoticeably suck
    out toxins and unwanted fluids in the body. There’s many things that people need to keep in mind is to
    maintain that overall good health and that is having a balanced diet.

    Here is my blog … garcinia extract scam

  13. May I simply just say what a comfort tto find someone thjat actually understands what they are talking about
    online. You definitely understand how to bring an issue to light and make it important.
    More people should look at this and understand this side of thhe story.
    I can’t believe you aren’t more popular given that you certainly possess the
    gift.

  14. Thanks for sharing your info. I truly appreciate
    your efforts and I will be waiting for your further post thank you once again.

    Check out my site best drip coffee maker

  15. Thanks for sharing your thoughts about best radar.
    Regards

  16. WOW just what I was searching for. Came here by searching for Pass Illimité

  17. Hmm is anyone else having problems with the images on this blog loading?
    I’m trying to find out if its a problem on my end or if it’s the blog.
    Any feedback would be greatly appreciated.

    Look into my blog … plano master of ceremonies

  18. To relieve this problem, a revision rhinoplasty would have to be done.
    The “Basketball Wives LA” star also made waves recently when she appeared with Drake and
    Blake Griffin in a skit for the ESPY Awards. Vanity is when you have something taken care of because you want everyone to notice and look at you.

    my web-site … nasal solar dermatitis

  19. DHA is a non-toxic sugar substance that has been FDA (Federal Drug Administration) approved
    since 1977. It is important to do any waxing at least twenty four hours or so
    in advance of applying any tan (fortunately, you will
    likely know about any big days or nights in advance so you will
    be able to do so) as not only will waxing afterwards remove the tan you
    have applied, waxing can also lead to dark dots on the skin which can collect the tan in the follicles:
    needless to say. Raspberry Seed Oil ‘ This is considered
    a superior source of moisturizer and contains skin emollients in the form of
    alpha and gamma tocopherols (Vitamin E), high concentrations of Vitamin A, antioxidants and fatty acids.

    Feel free to surf to my website – chloe sims starship Neutrogena build a tan reviews

  20. Everyone wants cheap bait these days but the big problem is that cheap often means rubbish.
    Connect “A’s” positive terminal to “B’s” negative terminal.
    Freshwater fish can be placed in the live well on the boat, or on a stringer to keep it alive until you are able to
    clean it.

    my page; fiberglass dock box craigslist

  21. When one hear the term plastic surgery, the first thing come into mind that it is related to a star (TV or movie actor) who trying to delay the effects of aging.
    If you are residing in Miami and want to enhance your appearance then you will need to
    visit an experienced cosmetic surgeon in Miami.
    By changing the size & shape of the nose, this cosmetic nose can positively
    influence the balance of facial features.

    Also visit my webpage … plastic surgery zac efron

  22. Make sure that all of thhe cabinets and racks are functional aand keep as the primary glal that they also have to be nice to the eye.
    Cabinets with solid wood fronts wiill last a loot longer
    andd they will also add a personal effect to the overall design. The actual cabinet layout will condition the way how you will use of the cooking
    area, they are paramount to functional kitchen design and
    theey also signify a significant part of the finished look.
    These aare only a feew reasons why the skilled, experienced and educated kitchen installerts
    will come with a really good ideas regarding the cabinets on your kitchen.

    Feell free to visit my website – kitchen fitters

  23. It’s nearly impossible to find educated people about this subject,
    however, you sound like you know what you’re talking about!
    Thanks

  24. Whhy people syill use to read new papers when in this technological world the whole tning is presented on net?

    Here iis my web-site; Continued

  25. Fantastic beat ! I wish to apprentice while you amend your site, how could i subscribe for a blog web site?
    The account helped me a acceptable deal. I hhad been a little
    bit acquawinted of this your broadcast providred bright clear
    concept

  26. Hi friends, nice post and good urging commented here, I am genuinely enjoying by these.

  27. Usually I don’t rea post on blogs, but I would like to sayy that this write-up very
    compelled me to try and do so! Yoour writing style has bbeen surprised me.
    Thanks, very great article.

    Stop bby my webpagee :: fashion look

  28. Tämän menetelmän pitäisi myös olla huomaamaton ʝɑ helppokäyttöinen. Hyppää
    kyytiin samantien jja löydä itsestäѕi se villimpi puoli.
    Aloita mukavat hetket livechat toiminnola muiden kanssa jutellen.

    Αlso visit my blog – cep seks indir

  29. I believe what you published was very logical. But, think on this, what if you were to create
    a killer post title? I mean, I don’t wish to tell you how to run your website,
    however suppose you added a post title to possibly get
    folk’s attention? I mean StylizedWeb.com

  30. Remarkable! Its genuinely remarkable post, Ι
    have got much clear idea regarding from tҺіs article.

  31. What i don’t understood is in truth how you’re not actually a lot more smartly-favored
    than you might be right now. You are so intelligent.
    You recognize thus considerably with regards to this matter, produced me in my opinion consider it from numerous varied angles.
    Its like men and women are not interested unless it is one thing to
    do with Lady gaga! Your own stuffs excellent. All the time maintain it up!

  32. One thing that is certainly important for the girl tto remember is always to tell her partner that tgey is interested, otherwise, her insufficient
    response could bee misread aand turn him off. A man wants or in other words craves to educate
    yourself regarding his female partner sexually aas well as the same craving knowledge by at least 18 as
    well. It use a positive relatiuon to male liido so it hlps
    in raising the over all health of person.

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>