A common question in class is “how do I overlap images and still see the background?” The answer, you use some type of transparent image. Traditionally we used a transparent GIF, but the quality isn’t so great. PNG has really become the preferred image format for transparency. PNG 8 gives you a transparent image, but you may see some white pixels around the edges of the image. PNG 24 transparent images are crisp and clean, but sometimes a bit bloated. Still PNG 24 now being widely used.

Unfortunately, it is well documented that transparent PNG 24 images will not display properly in Internet Explorer 6 without applying some type of fix. Instead of getting a truly transparent image you will see a blue background around the image like the image above. I’m not going to go into the technical reasoning for this problem, this is an article for beginners and there are numerous fixes and articles for this issue, Perishable Press has a great write up on the subject.

I’ve prepared a page that shows both of these problems; this page was created from the Six Revisions’ tutorials How to Create a Grunge Web Design Using Photoshop and How to Code a Grunge Web Design from Scratch – great tutorials, but I’ll write about that later. If you open my PNG transparency example page in Internet Explorer 6 you should see that the header image “Get Your Hands Dirty” has a blue background – not good. If you look at the heading “Featured Work”, a PNG 8 image, you should notice, albeit subtle, little white dots around the edges of the image – not good either. If you look at the heading “About this Website”, a transparent GIF, you will also see the little white dots around the edges of the image.

Now if you look at my example with PNG 24 images and a JavaScript fix applied in Internet Explorer 6 you will see that all of the images look great.

So how did I fix this? If you read the article PNG Fix for Internet Explorer from Perishable Press you will see that there is a general method for fixing PNG 24 images in IE 6. You’re going to need to create an IE specific CSS file, this file is linked in the head section of your HTML document after your regular CSS link within conditional comments.

<link href="styles.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]> 

<link rel="stylesheet" type="text/css" href="ie-specific.css" /> 

< ![endif]-->

The conditional comment starts with

<!--[if lt IE 7]>

This tells the browser that if the visitor is using a browser version older than IE 7 then use this special CSS file in addition to the styles.css file. It doesn’t replace the styles.css file, it just allows you to send specific CSS rules to IE 6.

In the ie-specific.css file you will need one declaration for the transparency fix.

.png { behavior: url(png.htc); }

You created a class called png. Behavior is a CSS property that allows you to attach a script to an element, class, or id. The png.htc file contains a JavaScript that will fix the PNG 24 display issues in IE 6 and earlier versions. You can learn more about this property and htc files in the SitePoint Reference.

You also need a special JavaScript file, the htc file. You will find this file all over the Internet, but here is a zip of the png.htc file that I used. You will also need a transparent GIF file, this is a 1px x 1px transparent GIF that the HTC file uses.

To make this fix easier to use, the files ie-specific.css, png.htc, and transparent.gif should be placed in the same folder. If you place them in different folders you will need to edit the paths in the CSS file and the HTC file. This isn’t really a big deal, but sometimes it can cause problems for the beginner.

Ok, you have got your CSS file created and linked using conditional comments, your HTC file and transparent GIF files are in the same folder as your CSS and you preview your page in IE 6 and it still looks like crap, oh I mean bad. We’ve got a little more editing to do – remember that class we created in the ie-specific.css file? Ok, in case you forgot, this one

.png { behavior: url(png.htc); }

You now have to apply this class in your HTML file whenever you use a PNG 24 image. For example the “Get Your Hands Dirty” PNG 24 logo was applied as a background image in the main styles.css file with this code

h1 a {
display: block;
background: url(images/title.png) no-repeat left top;
float: left;
height: 92px;
width: 426px;
}

so the png class from the ie-specific.css file needed to be added to the HTML

<h1><a href="#" class="png">Get Your Hands Dirty</a></h1>

Here is another example of how it was added to the featured work image

<h2 class="featured-work png">Featured Work</h2>

In the above example two classes have been applied – featured-work is from the main styles.css file and png is from the ie-specific.css file.

The ie-specific.css file can also contain other declarations that are for Internet Explorer 6 only; you are not limited to using this file just for fixing transparent PNG files. Anytime you think about putting * html in your regular CSS file to fix an IE 6 issue you can put the declaration in the ie-specific.css file instead.

Again, there are numerous fixes for this issue and this may not be the perfect fix for you. Check out the great article at Perishable Press on the subject or remember that Google is your friend.

This is a roundup of wonderful articles that deal with coding Web pages. Most are tips on HTML & CSS, but there are also a few JavaScript and PHP resources.

Remember, these are articles I “tweet” on Twitter. Click the @username to see the posts of some of the people who I respect and love to “follow” on Twitter, the #hashtags to search the related topics, and of course the actual links to read the awesome articles.

HTML & CSS Coding Resources

1. Handy Tips for Creating a Print #CSS Stylesheet http://bit.ly/XRk08
2. In the Woods – HTML, CSS, PHP and jQuery Killer Tutorials http://tr.im/kif7 (via @del_javascript @IsaacVanName)
3. RT @mlane: 13 Must-Have Add-ons To Strengthen Firebug – http://bit.ly/14KZQ0
4. Adaptive #CSS Layouts: New Era In Fluid Layouts? http://bit.ly/13gUdJ
5. RT @nishanjoomun: Experimental #CSS compatibility table http://tinyurl.com/qre2cb
6. 6 Reasons Why Designers Should Code http://bit.ly/n7IXQ great article and discussion
7. 6 Free PSD/(X)HTML-Templates http://bit.ly/g96kg
8. RT @Koufie: 16+ Easy #CSS Techniques that Simplify the Webdesigner’s Life http://is.gd/O9wB
9. Fixed vs. Fluid vs. Elastic #Website Layout: What’s The Right One For You? http://bit.ly/OqF1M (via @phaoloo)
10. RT @mlane: Everything You Need to Know About the !important #CSS Declaration – http://bit.ly/V69B7
11. RT @pairadocsdesign @giographix: 10 #HTML Tag Crimes You Really Shouldn’t Commit http://bit.ly/DPYcg
12. Best of TutorialFeed http://bit.ly/17yCrI http://ff.im/3t1EM (via @mytutorialfeed) #css and more
13. 10 Professional Looking Free #CSS Menu’s – http://bit.ly/VgZ3j (via @Minervity)
14. 14 Free Tools To Validate Your #HTML, #CSS & #RSS Feeds http://is.gd/Ika9 (via @briancray)
15. RT @ronicadesign: 30 Tutorials On Converting A PSD To #XHTML And #CSS > http://bit.ly/qJEJJ #photoshop
16. RT @ruhanirabin @IsaacVanName @designresources #CSS Tip: Create effective headline typography – http://bit.ly/OiHfc
17. How AJAX Works: 10 Practical Uses For #AJAX http://bit.ly/6qpw2 (via @webdesign_news) great for students!
18. RT @paviles @justdesign @RobStajo: #jQuery for Absolute Beginners: The Complete Series: http://is.gd/qNYE

Most web designers know that cheat sheets are incredibly useful. You can use them for quick reference, easy learning, and more. In this list, we’ve compiled an incredible collection of the 100 best and most useful cheat sheets out there.

Topics include:

• Color
• Adobe
• HTML
• CSS
• Ajax
• PHP
• JavaScript
• MySQL
• Action Script
• Miscellaneous

Check out 100 Terrific Web Design Cheat Sheets that Will Save you Time, Money and Mistakes.

Just so that you are aware, JavaScript The Missing Manual was not available when the initial JavaScript unit was developed.

A huge thank you to Talya J. for reviewing the book and submitting errors/notations to me. The publisher’s errata/errors can be found on the O’Reilly Web site. Be sure to print the “confirmed” and “unconfirmed” errors, as well as, the JavaScript assignment sheet.

This unit will be supported by David H. on Tuesdays and Wednesdays.

Firebug Official Web Site
Introduction to Firebug
Build Better Pages With Firebug
Firebug Tutorial: Getting Started
HTML/CSS/Javascript in Firefox
Debugging JavaScript in Firefox with Firebug
Debugging JavaScript with Firebug
Firebug Tutorial – Script Tab : JavaScript Debugging

Cheat sheet is a reference tool that provides simple, brief instructions for accomplishing a specific task. We have collated a set of best cheat sheets for web developers. It includes some of the popular programming language, e.g. jQuery, Mootools, Prototype, PHP, MySQL and etc.

Check out the cheat sheets at Web Appers

This morning when I was visiting Joshuaink, a great site that I like to read, I found that John Oxton had posted a similar question to his visitors in Is there a hole in my skill set?. This is a great “conversation” about the need for JavaScript as a front end developer.

Designing a Rainbow – Sexy Hot Colors – Lorelle on WordPress has a wonderful roundup of color resources on her blog today. Yummy!

graphicPUSH offers a Blog Icon Pack, a set of free icons for your blog or web site. Take a look at the graphicPush archives, there are a lot of interesting and informative articles.

WordPress.com is now offering free, WordPress based, blog hosting accounts to all; you no longer need an invitation to sign-up. Speaking of WordPress, WordPress 2.0 Beta 1 is now available.

Brothercake has a free CSS based simple website menu that you can download, customize and use on your sites. This zip package includes the necessary CSS, JavaScript, and XHTML to create both horizontal and vertical list menus.

In addition to validating HTML, XHTML, and CSS the W3C now offers an RSS/Atom Feed Validator.

php-editors has a list of PHP editors which includes licensing information, platform specs, and user rankings.