Update: Transparent Background PNGs in IE6

This is an update to a previous post I made about Transparent PNGs in IE6. I finally tried out the “IEPNGFIX v2.0” which was supposed to be the only solution I’ve found to support transparent background PNGs and tiling background PNGs in IE6. The other PNG fixes worked just fine for non-background images, but I am happy to report that the IEPNGFIX v2.0 works like a charm! It’s still in Alpha mode but it appears to work just fine with a background PNG image on one of my client’s websites. Woohoo!

Suckerfish, Sons of Suckerfish, Sons of Ursidae and IE6

One of the biggest pains of developing for the web is the necessity of having to make sure all of your sites work in Internet Explorer 6, which came out in 2001 and yet is still used by 20% of users (October 2008). IE6 sucks at handling CSS floats and positioning. Most of the issues are resolved by using a Global Reset Stylesheet but I still find myself occasionally running into new problems for IE6, like with the Suckerfish CSS dropdown menu first created in 2003 at http://www.alistapart.com/articles/dropdowns.

Then came Sons of Suckerfish which still didn’t do the job until I came across Sons of Ursidae (http://css-class.com/articles/ursidae/) which has done the job, at least for now.

Gotta run, this post was more of a mental note to myself, sorry!

How to Convert a PSD to XHTML

Nettuts.com is one of my new favorite web development blogs. One of their recent posts is pretty cool, especially for those new to web development.

http://nettuts.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/

Stop Dreamweaver 8 From Creating _notes Folders and dwsync.xml File

Ever since I upgraded to Dreamweaver 8, I’ve been annoyed by the _notes folders that are automatically created in each directory of the site. Of course, they are hidden in the Dreamweaver file view but they are visible in Windows Explorer if you are not hiding hidden file types. I often find myself having to delete these folders whenever I package up website files to send to other developers or designers. This link below provides a solution so that Dreamweaver 8 never creates the _notes folders and dwsync.xml files in the first place.

“Macromedia Dreamweaver 8 creates an _notes folder, even when you have the preference turned off in the Design Notes category of the Site Definition dialog box. Dreamweaver also creates a dwsync.xml file inside the _notes folder. When you run Clean Up in the Design Notes category of the Site Definition, Dreamweaver does not delete the dwsync.xml file or the _notes folder. (Ref. 196185)

Dreamweaver 8 keeps file synchronization information in the dwsync.xml file which is located in the _notes folder. Although the dwsync.xml file resides in the _notes folder, it is not a Design Note. The Clean Up design notes command only cleans up MNO files.

If you don’t use Dreamweaver’s Synchronize feature, you can disable the “Maintain synchronization information” option from the Remote Info category of the advanced view of the Site Definition dialog box. This will delete all of the existing dwsync.xml files and stop the creation of future dwsync.xml files and _notes folders.

Note: Disabling the “Maintain Synchronize Information” option will prevent you from using Dreamweaver’s Synchronize functionality.”

http://kb.adobe.com/selfservice/viewContent.do?externalId=91b33859&sliceId=2

How to Stop Contact Form SPAM

The majority of the websites I develop for clients have contact forms on them for a variety of reasons. First, it’s more convenient for users to fill out a form within their browser window as opposed to requiring them to open up their email software to write an email from scratch. Second, it’s the primary method of measuring generated leads/conversions, and clients can require exactly the information they need to qualify leads. Third, by using a contact form, clients won’t have to publish an email address on the site for spam bots to harvest. However, contact forms are definitely vulnerable to being flooded with spam and that’s why I am writing this post on how to prevent exactly that. I use a variety of methods which tend to prevent 99% of automated spam submissions:

Step 1. Validate The Form Fields – Check to make sure all required form fields are filled out before processing the form. I posted about a generic form validation script awhile back, and I would still recommend it. It uses JavaScript to check that every required field is filled out and checks that the email address is formatted correctly. It’s simple and nothing fancy. However, it would not be very effective on its own since most bots bypass any JavaScript security measures.

Step 2. Validate The Referrer – If you are using a separate file to process the form, make sure to validate that the form is being submitted from the page with the contact form. This will prevent bots and spammers to automatically access the processing file to spam it. However, the referrer can easily be spoofed and often is, so this method alone is certainly not bulletproof.

Step 3. Hide Fields with CSS – Most bots and spammers will automatically fill out every form field that is on the page. One way to stop them is to insert a blank field in the form but hide with CSS “display: none;”. Add some code to your form processing file to check to ensure that the hidden field remains empty; if it’s not, it’s most likely filled out by a spammer and thus should not be processed.

Follow those 3 steps and you’ll be much better protected against contact form spam.  There are definitely additional measures you can use such as more complicated JS validation, CAPTCHAs, and asking simple questions that only humans can answer (1+2=?, what color is a cardinal?, etc.), but I’ll write more about those in another post.

Align Image to Bottom of Table Cell in IE with CSS

Sometimes you might set the table cell to “valign=bottom” to place an image at the bottom of a table cell but a space of 1 or 2 pixels is still appearing at the bottom in Internet Explorer. A quick way to fix that is to apply the CSS declaration “vertical-align: bottom;” to the image itself.

Dreamweaver Password Recovery

I don’t know how many times I’ve forgotten the FTP password to a site in Dreamweaver and needed to decrypt it in order to figure out what it is, so luckily I found the site below to unveil the password for you:

http://apptools.com/password.php

Directory Structure for Websites

If you are constantly developing new websites, what kind of directory structure do you use to organize all of your files? I try to set it up something like this:

Directory Structure

Obviously it will depend on how big the site is you are developing, but the majority of the sites I work on are small static websites.  It seems to work out so far for me but I’d love to see how other web developers organize their sites.