Take a look at this jsFiddle: http://jsfiddle.net/jennyfofenny/VkCXh/ If you remove the CSS style on the right, Chrome 10 will by default hide input elements that have the “hidden” attribute set to true. The problem with this is that the hidden attribute is not a valid attribute – and should therefore be “undefined”.

So, if you’ve noticed this issue, make sure to add the following CSS style to your reset stylesheet so Chrome 10 behaves like all the other browsers:
input[hidden=true][type=text]{display:inline;}

Recently, I got an award at work known as the “Superman Award”. It is a Superman action figure that collects a new accessory with each recipient. And at this point, it has collected quite a bit of stuff. So, I’ve decided to make an addition of my own. Since the Superman Award is essentially a katamari at this point, I went ahead and made a crochet katamari (in the style of the PS2 game Katamari Damacy, of course). The attempt I made for the Superman award turned out OK, but I improved upon it and have posted the pattern below for your enjoyment.

Worsted weight yarn in Color A
Worsted weight yarn in Color B
Worsted weight yarn in Color C
Crochet Hook (size G)
Tapestry Needle
Polyfill (for stuffing)

Exact gauge is not important for this project

st/sts: stich/stitches
sc (single crochet): Insert hook into st and draw up a loop. Yarn over and pull through both loops.
adjustable (magic) ring
sc2tog (single crochet 2 stitches together): Insert hook into st and draw up a loop; insert hook in next st and pull up another loop. Yarn over and pull through all three loops. [1 st decrease]

The katamari and nodes are worked in continuous rounds.

With A
Round 1: 5 sc in an adjustable ring [5 sts]
Round 2: 2 sc in each st [10 sts]
Round 3: *2 sc in next st, sc in next st. Repeat from * until end of round [15 sts]
Round 4: *2 sc in next st, sc in next 2 sts. Repeat from * until end of round [20 sts]
Round 5: *2 sc in next st, sc in next 3 sts. Repeat from * until end of round [25 sts]
Round 6: *2 sc in next st, sc in next 4 sts. Repeat from * until end of round [30 sts]
Round 7: *2 sc in next st, sc in next 5 sts. Repeat from * until end of round [35 sts]
Round 8: *2 sc in next st, sc in next 6 sts. Repeat from * until end of round [40 sts]
Round 9: *2 sc in next st, sc in next 7 sts. Repeat from * until end of round [45 sts]
Round 10-14: sc in each st [45 sts]
Round 15: *sc in next 7 sts, sc2tog in next st. Repeat from * until end of round [40 sts]
Round 16: *sc in next 6 sts, sc2tog in next st. Repeat from * until end of round [35 sts]
Round 17: *sc in next 5 sts, sc2tog in next st. Repeat from * until end of round [30 sts]
Round 18: *sc in next 4 sts, sc2tog in next st. Repeat from * until end of round [25 sts]
Round 19: *sc in next 3 sts, sc2tog in next st. Repeat from * until end of round [20 sts]
Round 20: *sc in next 2 sts, sc2tog in next st. Repeat from * until end of round [15 sts]
Begin stuffing katamari body and continue stuffing as you progress
Round 21: *sc in next 1 st, sc2tog in next st. Repeat from * until end of round [10 sts]
Round 22: *sc2tog in each st [5 sts]
Round 23: fasten off

With B
Round 1: 5 sc in an adjustable ring [5 sts]
Change to A
Round 2: 2 sc in each st [10 sts]
Round 3: *2 sc in next st, sc in next st. Repeat from * until end of round [15 sts]
Change to C
Round 4: sc in each back loop [15 sts] Round 5: sc in each st [15 sts]

Lightly stuff and sew nodes to body in a geometric pattern; weave in ends.

When arranging the nodes, try placing one on top and one on bottom. Then, find the 2 scs (5) from round 9 and the sc2togs (5) from round 15 and placing the nodes around these spots. It can also be helpful to safety pin the nodes to the body before sewing to ensure proper placement.

I was reading a submission on Reddit the other day about a screenshot of Roller Coaster Tycoon. That screenshot drew me into a Wikipedia wormhole that started with the article on Roller Coaster Tycoon and culminated in my visiting the page on Theme Hospital. In the article, it talks about various attempts to develop an open source game engine based on Theme Hospital using the old game assets. So, I found CorsixTH (which is in Beta), and wouldn’t you know, it’s just like Theme Hospital! I noticed a couple small bugs and the “Charts” menu isn’t fleshed out, but it’s just like the game I remember.

So, now you have to ask yourself three things:

• Did you love Theme Hospital when it first came out?
• Do you still have the original CD?*
• Are you ready to rock like it’s 1997?!?!!1!

If you answered at least two of those options in the affirmative, you owe it to yourself to give this game a try! You owe it to yourself even if you didn’t! So, head over to the CorsixTH downloads page and get the version of the installer that you need (available for Windows, MacOS and Linux). Also, be sure to copy the “HOSP” directory from the CD over to your hard drive and link to it in-game after CorsixTH is installed*. The wiki for CorsixTH has additional instructions for installing the game as well as an FAQ if you have any additional questions.

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!