I posted it up on icanhascheezburger’s website here.

Here’s a picture of Helo when he’s a bit better composed:

and here’s our kitty, Starbuck, sunbathing:

BTW, that chair has only been in the house for 2 days, and it’s already got a nice coat of fur…

The first obstacle that I encountered during this process was obtaining a font that allowed for distribution (this is a tough issue since many fonts that you normally use on a site have a different license that does not allow for distribution). So, I was going to have to replace my Century Gothic font and, after some searching on the internet, I found the Liberation Sans font by Red Hat to be acceptable.

Next, I know you’ve been expecting it, but there comes some trouble from Internet Explorer. The font was delivered as a TrueType font. This works for Safari, Firefox, and Opera, but Internet Explorer is expecting a specific, proprietary format called Embedded OpenType that was designed by Microsoft to protect font creators. However, there is a command-line tool available called ttf2eot that will convert your fonts to the eot format. It is also worth noting that the tool will only work for TrueType fonts. If you have an OpenType font, you’ll need to convert to TrueType. The only tool that I’ve found (that’s free) to make that conversion is Font Forge. Font Forge only runs in Cygwin, X11, or Linux and requires certain libraries. So, if you’re going to go that route, follow the specific instructions here for setup on Windows (make sure that Cygwin was installed with the proper external libraries and dependencies) and here for setup on Mac. I’ll assume Linux users can get it working, since it’s native to that platform.

After you’ve got your font files (hopefully a .ttf and .eot file for each font you’d like to use), you need to set the @font-face rule in your CSS. You’re going to want to use conditional comments to isolate Internet Explorer’s rule. You’ll also want to use the !important modifier on the Internet Explorer styles. Here’s what your @font-face rule might look like:

<!--[if IE]>
  @font-face { font-family: "Liberation Sans Regular"; src: url("fonts/LiberationSans-Regular.eot") !important; }
<![endif]-->

@font-face { font-family: "Liberation Sans Regular"; src: local("Liberation Sans Regular"), url("fonts/LiberationSans-Regular.ttf") format("truetype"); }


You can now use your font in regular CSS rules. Here’s an example:

h2 { font-family: "Liberation Sans Regular", Verdana, sans-serif; }


So far, I’ve been happier with the @font-face rule over sIFR and I hope you will, too. If you have any comments/suggestions/corrections, please feel free to leave a comment. Thanks!

“CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.”

This technique can be extended for non-background images on your site as well. However, some issues arise when you use CSS spriting for your main navigation elements(among other images):

1. You can’t attach alternate text to divs for accessibility purposes
2. CSS Spriting and the IE6 PNG fix are incompatible
3. The images will not print out on printouts unless the client option to print background images is selected (this is bad for logos and menus, etc)
4. For images in pages (that are not actually background images), it seems semantically bad to hide the image in CSS.

With these concerns in mind, I devised a cross-browser compliant solution that addresses all of the aforementioned problems. The new technique uses an image tag, a div, and the CSS clip property.

Here’s the code for the technique:

The CSS
.menu-about { width: 106px; height: 29px; position: relative; top: 0; left: -293px; }
.menu-about img { position: absolute; clip: rect(0 399px 29px 293px); }


The HTML
<div class="menu-about">
     <img class="transparent_png" src="http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png" alt="About" title="About Us" width="611" height="39" /></div>


And here’s the code in action: [ view the full image ]

And here’s an alternate solution using the anchor tag:

This technique can be easily customized in many different ways. However, for repeating backgrounds and css mouseovers, the traditional CSS sprite techniques are better suited.

Update: As Dan pointed out in the comments, this technique can accomplish css mouseovers (I overlooked this possibility since my first draft of this article only used divs, rather than anchor tags). Thanks, Dan!