If you haven’t had the opportunity to check out the Great Games Experiment, you are missing out. If you are into games, it’s a great site to learn about new games, get recommendations, read reviews, and meet developers.

Anyway, for whatever reason, one of my Games Lists is featured on the front page today. If you get a chance, go check it out – or sign up for GGE and you can post a widget of your game-list anyplace, like below:

First of all, take a bit to read this great article on CSS Tricks called: Nine Techniques for CSS Image Replacement. It’s far more comprehensive than this post will be, and should be a good starting point for you to choose which Image Replacement technique will work best for you.

With that said, I usually use Technique #3, credited to Mike Rundle (aka. the Phark Method.). Here’s their Mark-up as applies to an h1 with class=”technique-three” with text in it:

h1.technique-three {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
}


For whatever reason, occasionally I get horizontal scroll-bars in Safari. To deal with this I simply added:


h1.technique-three {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;

overflow:hidden;
letter-spacing:-1000em;
}

The letter-spacing was just thrown in there for good measure really. Either way, this seems to fix the issue. For sure, do your own experimenting as I cannot gaurantee this won’t screw anything else up.

I created a CSS Code Snippet in TextMate with a tab trigger ‘ir‘ – that simply throws in the 3 lines of CSS because I use this just infrequently enough to forget it.

Good luck, and feel free to leave any comments, thoughts, or concerns relating to this issue!

Now, go code.

Sheesh…no kidding, right?

Well, it’s long past time for me to get AndrewDC.com back to acceptable/up-to-date standards.

What have I been doing all this time, you ask?

Working. Working a lot, actually. My main two projects at my new job, (I now work for a great company called Garage Games, in beautiful Eugene Oregon.), have been InstantAction.com:

And, more recently, PlayLegions.com:

Now, don’t get any crazy ideas: These sites were a massive team effort from a talented group of web designers and developers. There is no way I could possibly take credit for these sites – other than my part on this team. My personal involvement in InstantAction and PlayLegions has been in the top level UI design, and CSS HTML structure.

Anyway, you can look forward to me updating this site in the near future. In the mean time – Thanks for reading!

-Andrew