Transparent background PNG’s in IE: The only guide you need

2009 January 9 – 10:19 am
I know this question has been around for a very long time but I am still seeing bookmarks and stories pop up around the web for ways of handling transparent PNG's in Internet Explorer (IE) 6 and below. After working with them for a long time now, I thought that I would post the best way that I have found to achieve transparent background images. This method is nothing new. It may be used in conjunction with a new way but the CSS has been around for a very long time. I wanted to focus on the background image. I see a lot more ways of dealing with an actual image in the page and not so much the background image. I hope this will serve as a reference for people to get all of the the info they need in one place and not have to visit two or three sites. Without further adieu let us begin. I want to start off by saying that I think retrofitting for older browsers (yes IE 6 and below are too old) is a bad idea. We should be moving forward with our development in CSS3 etc... while making sure the older browser are still readable. They do not necessarily need to look the same. Now, with that said, I work as a web developer and know that this idea is rarely accepted by designers and clients alike. I just wanted to get my feelings out there because that is the whole point of this blog. On to the method already. Wait for it...

The CSS

PLAIN TEXT
CSS:
  1. * html #id {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image_name.png',sizingMethod='scale');}

yep! That's all it is. No fancy javascript, no special image name with transparency behind it, nothing. Throw that in your IE style sheet or right below your 'good browser' statement in your screen style sheet and you will be good to go. Remember: the path is relative to the page you are on, not the CSS file. So absolute path to the image is probably the best way to go.

Notes

As always there are some things to be aware of when using the filter method. If you make sure to follow this rule, you will save yourself a lot of headache. On the element your are using the filter. DO NOT set a position. On any element inside of the element with the filter, DO set position to relative. (eg.) If your transparency is on your wrap div, do not set a position. Set position relative on your content div and all items within content will be OK. Now your links and text will be clickable and selectable.
PLAIN TEXT
HTML:
  1. <div id="wrap">
  2.   <div id="content">
  3.     <h1>Site Title</h1>
  4.     <h2>Tagline</h2>
  5.     <p>Some <a>long-winded</a> content with a link</p>
  6.   </div><!--end #content-->
  7. </div><!--end #wrap-->

PLAIN TEXT
CSS:
  1. #wrap {background: url(../images/image_name.png);}
  2. * html #wrap {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image_name.png',sizingMethod='scale');}
  3. #content {postion: relative;}

As with all other posts you have read about the filter method. The background image will stretch to fit the element, so there is no background-position usage etc... If you are unable to use a separate (slightly modified) design to handle your transparency needs for IE then the above method will save you a lot of pain when dealing with them. Below is the code for a snippet to add the above CSS to your style sheet easily with Textmate or e text editor create a new snippet add:
PLAIN TEXT
CSS:
  1. background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/${1:image_name}.png',sizingMethod='scale');$0

to the big block Activation: tab trigger > iepng Scope Selector: source.css

Further Reading

By mbathon | Posted in Playhouse | Tagged , , , , , | Comments (8)

Wordpress iPhone App

2008 November 5 – 3:33 pm

Just found the iPhone app for my touch. So far it seems to work well. Once I learn to better work with the on screen keyboard it should be a great asset to my blogging ability.

As I have found with the twitter app, this should help to bring a more consistent schedule to my blogging.

Maybe this will get me to work on that design I have not worked on yet.

By mbathon | Posted in Playhouse | Tagged | Comments (0)

Homemade Cleaning Products

2008 June 8 – 10:03 pm

Recently I have been noticing more and more television shows and web articles mentioning the use of the homemade cleaning products. Because of my craziness about cleaning, this really piqued my interest. After a little research, I began to realize that all of the products I see at the store (a different product for every different surface, floor and person in the house) were a huge excess and not necessarily necessary. I checked under my sink and noticed that I am guilty of the excess. I have everything from two types of glass cleaner to three types of bathroom cleaner. Why?

White Vinegar

White VinegarSo I decided to make the switch and produce my own cleaning products. With my main cleaning item running out, I decided to wait until it was finished. That day came about a two weeks ago. Off to the store I went to gather some supplies (baking soda, white vinegar and a spray bottle). I could have used the empty bottle from my just finished product in order to make my home brew, but I decided to buy one with measurements across the side. My main recipe came from the organizedhome.com site. I mixed equal parts water and white vinegar and away to the bathroom I went.

This homemade cleaner performed well. I was quite surprised to see that it cleaned just as well as my store bought mass-produced cleaner, and it smelled better (I like the smell of vinegar. Who doesn't?) This smell went away once the cleaner dried but left behind an awesomely clean bathroom.

Baking Soda

Baking Soda My next challenge was something I have been trying to clean for years. The bottom of my tub. I used cleaners on it and scrubbed and scrubbed but I never seemed to come clean. After reading on the Clean & Green site that baking soda works as an all-purpose cleaner I decided to give it a try. I tossed some white powder out of the familiar orange box, added some water and went to scrubbing with a sponge. In about 10 seconds, I noticed the once white powder was beginning to become darker. The bottom of the tub was actually becoming clean. After rinsing with the shower head, I had to take a step back and admire a job well done.

From now on, I will be checking the above two sites for more natural cleaning recipes to conquer my household product needs.

Further Reading

By mbathon | Posted in General | Tagged , , | Comments (1)

Gus Macker Weekend

2008 May 28 – 11:09 pm

Playing stellar defense This past weekend Kami and I went to Quincy for the 35th annual Gus Macker Tournament. For those of you that do not know what this is, it's basically a 3 on 3 basketball tournament that always brings out Quincy's finest.

So, what makes this year's Macker festival special? Well...it is the first one in which I got to partake. About a month ago I answered an unexpected phone call (we each have our own cell phones) from Kami's sister. To my surprise, it was not Kami's sister on the other end, but her brother-in-law. He proceeded to ask me the question I had waited to hear for 6 long years. Now I am paraphrasing here but I think you will find it fairly accurate, "Matt, you are the coolest guy I know, will you play basketball on my Gus Macker team and raise our skill level by a ton?" When he put it like that, how could I say no.

So off to Walmart I went to buy a basketball (even though I am good, a guy has to practice), a five dollar one will do. And do it did. Ball in hand, all I needed was a place to practice. What better place than a city park. Outdoor basketball, I should practice outside right? On the City of Belleville website I went in search of basketball courts. I thought my options were going to abundant, but no luck, only one court to choose from. Although it was a short distance from my house, it really sucked. I woke up bright an early one morning to go play, went and played, came home and decided to look for other options. Lady luck was shining on me though. My next-door neighbor decided to move out and left his spectacular basketball hoop collecting dust in his driveway. It was just the thing I needed. Daily 3 to 4 hour practices were made and I began to feel ready for the big day.

The schedules came out and May 24, 9am became brightly circled on my calendar (well, an event was added to my Google calendar) as my time to shine. Shine I did. Team Gooding (we were too lazy to pick a real name so we went with our team captains last name) won its first game 15-9. I pitched in with several big rebounds and about 5 points. Not bad for not having played competitively since 8th grade.

You can\'t inbound on me fool Spirits we high going into our second game but it was not meant to be. Mr. TwoPoint McTwoPointerson from the other team decided to have the best game of his life. Of the six two point shots he tried, he made 5 of them and we were quickly dispensed 15-6 in about 10 min. All I can say about that game is, at least he wasn't my man to guard.

So we were done for Saturday and after the annual Gus Macker weekend party at Kami's sister's house we were ready to salvage the weekend in the loser's bracket. Someone forgot to tell the third team we played that it was street ball. The losers decided to call every touch (and some phantom touches, its true) as a foul. They called so many fouls that they were shooting free throws for them about 5 min into the game. We were not deterred though, we battled hard and after being up 10-9 we fell in a heart-breaker 15-12. After two loses, we were out.

Surprisingly though, we were not down. We had won a game, played some pretty good basketball and a good time was had by all. I guess we will just have to practice a little harder for next year. Maybe 5 hour practice sessions are needed (if that unexpected phone call comes again next year).

Update: A new neighbor moved in and offered me his basketball hoop. Let the 5 hour sessions begin.

By mbathon | Posted in General | Tagged , | Comments (2)

Puke

2008 May 21 – 8:36 pm

I just want to extend congratulations out to the jerk faces from Manchester for winning their third UEFA Champions League title. This "world class" final was taken to penalty kicks, where John Terry cost Chelsea the title by hitting the post. However, it was ultimately ex-Arsenal player Nicolas Anelka who missed the shot which clenched the title for Manchester United .

After what happened in the 2006 final, I know what the Chelsea fans are going through. But since I think their entire team is crap, I am glad they will finish the season trophyless. I do not look forward to the Glory Glory Man Utd talk we will have to listen to for the next 12 months. Arsenal's next game is July 9 v Barnet. Now all that we can do, in the immortal words of Nick Hornby, is

"sit in the park and wait for the fixture list to come out"

The only good thing about the summer is that Holland qualified for the Euros. Come on you Oranje!!!

By mbathon | Posted in Soccer | Tagged , , | Comments (1)

Rounded Corner Form Elements

2008 May 7 – 5:05 pm
One task I am being faced with more often when creating form elements is the use of rounded corners on text inputs, select boxes and text areas. One solution in dealing with this dilemma is just to crop out the round corner image from the concept file, give the form elements a border that matched the background color and place them into that area. This way may be the simplest answer to the problem but it is riddled with problems.
  1. When a user resizes the text, the box will not expand.
  2. You will need a new image for each different size of input you need.
  3. Absolute positioning (and the resulting extra CSS lines will need to be added) is the only sure way to line up the inputs inside the image
In order to work through these issues and out clean scalable rounded corner form elements we will first begin by creating the HTML code for the input elements.
  • <strong>
  • <em>
  • <span>
  • <span>
These will provide the hooks our CSS will need in order to create the rounded corners. You can use any HTML tags you would like to surround the code as long as you can add a style to it. The strong and the em tag will receive longer images that will account for and size changes on the input fields and text size increases. The other two images will just be images of the corners. The two longer images will need to have a transparent background for the color inside the lines. If you have a non-solid color background just make the bottom left image have the background and the top right image transparent.

The CSS

PLAIN TEXT
CSS:
  1. strong {background: url(/images/input-bottom-left.gif) no-repeat 0 100%; display: block; float: left;}/*longer sides*/
  2. strong em {background: url(/images/input-top-right.gif) no-repeat 100% 0; display: block; float: left;}/*longer sides*/
  3. strong em span {background: url(/images/input-bottom-right.gif) no-repeat 100% 100%; display: block; float: left;}
  4. strong em span span {background: url(/images/input-top-left.gif) no-repeat; display: block; float: left;}
  5. input, select, textarea {margin: 1px 3px; border: 1px solid #fff;}
  6. br {clear: both;}

The HTML

PLAIN TEXT
HTML:
  1. <form>
  2.   <fieldset>
  3.     <legend>Rounded Corner Form Elements</legend>
  4.     <label for="txtFirstName">First Name:</label>
  5.     <strong><em><span><span><input id="txtFirstName" maxlength="50" name="FirstName" size="25" type="text" /></span></span></em></strong><br />
  6.     <label for="txtLastName">Last Name:</label>
  7.     <strong><em><span><span><input id="txtLastName" maxlength="50" name="LastName" size="15" type="text" /></span></span></em></strong><br />
  8.     <label for="txtaraComment">Comment</label>
  9.     <strong><em><span><span><textarea id="txtaraComment" cols="50" rows="10" name="Comment"></textarea></span></span></em></strong><br />
  10.   </fieldset>
  11. </form>

Rounded Corner Form Elements


By mbathon | Posted in Playhouse | Tagged , , | Comments (10)

Welcome to Bathew.com

2008 May 4 – 9:33 pm
Welcome to Bathew.com. This site will be writings about many different types of topics. Check back often and please remember that this is a work in progress. Feel free to leave feedback in the comments about anything related to the writings or the site itself.
By mbathon | Posted in General | Tagged | Comments (2)