Visit: PlayLegions Facebook App
CSS/XHTML/Javascript/PHP, Front-End UI/UX Design.

Since InstantAction technology allows games to be played inside a web browser, why not integrate one of our popular games with Facebook’s extensive social network? Continue Reading »

Visit: PlayLegions.com
CSS/XHTML/Javascript/PHP, Front-End UI/UX Design.

PlayLegions is a single player version of the popular InstantAction game Fallen Empire: Legions. One of our key goals with PlayLegions was to streamline our design and help users get directly into a game without having to register. Continue Reading »

Visit: InstantAction.com
CSS/XHTML/Javascript/PHP, Front-End UI/UX Design.

The first project I worked on for Garage Games was (and is) InstantAction. InstantAction is basically a game console, similar to Microsoft’s XBOX, or Nintendo’s Wii, that you can load up in your web browser. Launching in early spring of 2008, InstantAction now boasts more than 2 million registered users from all around the world. Continue Reading »

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.