How to clone / duplicate a VirtualBox VM on Mac OS X
The sad truth is that it’s becoming more and more important to cross test your markup on multiple browsers including Internet Explorer. Yes I’ve heard the announcement about IE6 being dead, but chances are you probably need multiple browsers, and graceful degradation / progressive enhancement should still be the ultimate goal for any web designer.
VirtualBox to the rescue
VirtualBox is a fantastic virtualization tool for Mac OS X, Windows, Linux and Solaris. I actually like it more than Parallels, and unlike Parallels, it’s free. Setting up a virtual machine is pretty easy, but it’s a bit time consuming. Once you have a VM set up there doesn’t appear to be any quick way to duplicate the already working image. This tutorial will guide you through the steps needed to duplicate a VirtualBox image on Mac OS X.
The mailto syntax; A comma may not work in Outlook Web Access
The mailto syntax is pretty simple, but sometimes you might run into problems with some mail clients (AKA Outlook Web Access). Most of them are very forgiving and you can drop a comma for example right into the body of the mailto and have no problems, but it’s better not to do that. It’s much safer if you use hexadecimal numeric values for your special characters. For example a comma is %2c and a space is %20.
CSS tip, declare your font family once
Here’s a CSS tip that I wish more people would follow. When setting up a font on your site, say Verdana, there is no reason to declare it on every H tag, P tag and class you are using. Throw it up in the body and be done with it. The same goes for font sizes, colours and anything else that will be uniform across the site. Once you have done this you can override it for specific tags and classes when you need too.
body {
font-family:Verdana, Arial, sans-serif;
font-size:12px;
margin:0;
line-height:130%;
color:#333333;
}
This will make your life easier and everyone else who has to work with your files will thank you. I think we should always be looking for ways to make our CSS smaller, cleaner and easier to read.
Adobe Photoshop CS4: Blurry edges with the Rectangle Tool
I was playing around with Photoshop CS4 and came across an odd setting. I’m not even sure what the default setting usually is, but for me it was my first time dealing with non-pixel perfect blurry rectangles in Photosohp and it really threw me for a loop. Below you can see two 60 pixel boxes created with the rectangle tool. Both boxes look the same, but upon further inspection you will see that the right box has blurry edges and the left box is pixel perfect and sharp.
Internet Explorer 6 and redirected anchor links
Why are my are my anchor links not working in IE6?
As a web designer I constantly run into browser bugs and 90% of these bugs belong to either IE6 or IE7. Remarkably these two browsers don’t even consistently break the same way. What is messed up in IE6 may be completely messed up in a different way in IE7. The standards compliant WebKit and Gecko engines used by popular browsers like FireFox, Safari and Chrome rarely see many of these annoying bugs, but the masses use IE, so we as designers and developers must make them work.
Create a custom iPhone icon for your website
If you own an iPhone you may have noticed that you can bookmark websites and add them to your home screen. These are called Webclip Icons and they are either a snapshot of the website or an actual website icon similar to a favicon that shows up in a desktop browsers address field. If you want to add an iPhone icon to your site it’s very easy to do.
Fun with Photoshop: The liquify filter
Sometimes it’s fun to goof around with Photoshop and have fun. Photoshop is well known for it’s image manipulation tools. You can do all sorts of interesting things from colour correction to merging different photos together. Some examples can be found on my old deviantArt account.
Using WordPress custom fields for toggling plugins
More and more I find myself using WordPress as a CMS. This requires a little more customization than you would need for the average out of the box blog experience but WordPress can make a wonderful little CMS. Custom fields are just one way to gain finer control over your pages and posts both for blog or CMS functionality.
IE6 specific CSS
When Internet Explorer 7 came out it was a huge disappointment to many web designers. It’s still littered with bugs and quirks, but a lot of things that were not recognized in IE6 are fixed in 7. This adds even more problems to the mix, because now we have to code for two bad browsers and IE6 still represents a huge chunk of users. With email design you also have to remember that many email programs render like IE6 or even use the IE6 engine.
Photoshop Tip #4: How do I make arrows in Photoshop?
A co-worker asked me this a few weeks ago. It’s not something you often need in Photoshop, and the way it is done has changed over time. These directions apply to Photoshop CS 3, but they may work in other versions as well.
