Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Past Blogs

It's Difficult.


Learning to build websites using standards based, accessible X/HTML and CSS is like learning to drive a manual transmission hovercar. It is quite difficult if you're coming from a table based design philosophy. It's floaty, and mysterious, and nothing behaves quite like it should. But doing so really is worthwhile - even Newsweek thinks so. (Supposedly, they did an interview with famous web-guy Jeffrey Zeldman, but I can't find the article online.)

In other news, we have LOLed our cats. Just a little bit. Please don't call the ASPCA.

Ingrid makes a terrifying discovery.

I ♥ Musicals.


I like musicals, and I'm not afraid to admit it. Last Friday, the husband and I saw Young Frankenstein The Musical. This is the whole Broadway production, and it's opened in Seattle. It was fantastic! It was hilarious, had impressive special effects and scenery. But most of all, we couldn't stop laughing. I really can't wait for the official cast recording to come out.

Clearfix (with an IE7 solution).


If you begin working with CSS for your web page layouts instead of tables (and you really should), you will encounter problems with floated elements. The most mind blowing issue is when you have an element floated to the left or right, but that floating element escapes OUT of the element that contains it. This behavior is, in fact correct, since a floated element is removed from the normal flow of the document, and hence, any elements containing it. However it really can play hell with your web pages - so here's my preferred solution.

Very Tall Image This paragraph, with a white border contains a very tall image that is floated to the right of the paragraph, while text flows around on the left side. However, you can see here that the image very rudely busts out of the paragraph element.

There are a variety of ways to correct this, but the most robust method I've found is using Clearfix by PositionIsEverything. First, add a clearfix class to your main stylesheet with the following style declarations.

 {	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;

Then assign the clearfix class to each element from which floated items are escaping. Here's the code for the corrected paragraph:

<p class="clearfix">

Very Tall Image This is the same image and paragraph as above, except that I've added the clearfix class to the paragraph. Now, the paragraph expands to contain any floated elements.

I find the clearfix class to be a very elegant solution. It fixes the element with the issue (not neighboring elements), and it's very robust and reusable. All you need to do is add a clearfix class to each element that needs to expand to contain a floated element.

There's just two teensy little problems with the solution thus far - Internet Explorer 6 and Internet Explorer 7. They don't support the :after selector, so a bit more code, inside conditional comments, is required.

<!--[if lte IE 6]>
<style type="text/css">
.clearfix { height: 1%; }

<!--[if IE 7]>
<style type="text/css">
.clearfix { display:inline-block; }

That is how to corral escaping floated elements using clearfix, including an IE7 solution.

Photograph originally from APOD.

Dress Up For the Holidays


You thought I was done shilling for Iconbuffet? Think again. You're going to need these free web graphics to prepare for the upcoming holiday season:

Amsterdam High Seas. Yar, how coud ye resist these piratical images when Talk Like a Pirate Day be a mere month away?

Pumpkin Eve. You could carve a pumpkin, or decorate your emails with these icons. My way is much less gooey.

Turkey Hunt. Stuff your face if you can. This turkey is prepared.

Remember, it's all free. Free I tell you! Now, go sign up and get some of your own.

Need More Convincing?


Oh, so you need more convincing to sign up for Iconbuffet? Here's a few more pictures you could get:

Manhattan Tech Toys. Even if you can't get a real iPhone, you can still get a resonable facsimilie in portrait or landscape.

Slideshow Pro. Your boring old photo album only has text identifying links. What a rookie mistake. Use these images instead.

Durango Research. These retro-style graphics will dress up your latest research paper nicely. If only the DNA sequencer would hurry up...

Remember, it's all free. Free I tell you! Now, go sign up and get some of your own.

So Very Disappointed.


None of you signed up for Iconbuffet. I'm so very disappointed. Did you think I was kidding when I said you should do it? Check out these neat icons you could be putting or your website or using as a chat avatar. Perhaps you just didn't know what you could be getting:

Manhattan Pub Crawl. Look, it's beer. I know you could use some beer.

Blinksale. Just one of the many fine professional image sets available; this is great for those e-commerce applications.

Sushinobi. Ninjas and sushi. As we all know, ninjas are the real ultimate power, and they might be persuaded not to kill you if download them. Or you could just eat the fine fine sushi.

Pretty pictures, huh? Now, go sign up and get some of your own.

Pony Up Slackers.


Over in the left side navigation, I've put up a few new links recently. I'll be expanding the articles section with some of the techniques I've discovered in the future. But for now, I'd like to draw your attention to the "Free High Quality Icons" link - this will take you to my Icon Buffet Landing Page. A landing page is a webpage designed to drive visitor actions such as purchasing or signing up for something. This page contains several good elements designed to get you to sign up for the Iconbuffet service.

I notice that I have made a few common landing page mistakes here - I'll have to address those in the future. Briefly:

You all had better sign up now. Seriously, I need the referral bonuses. Next week I'll bring on the guilt.

Geek Alert.


We had company this weekend, and they kept us quite busy. We took them to the Experience Music Project / SciFi Museum; ostensibly to see the Disney Music Behind the Magic show. But since the husband and I found ourselves at EMP/SF Museum for the 3rd time in less than a year, we signed up for a membership. That's right - we are now card carrying members of the Science Fiction Museum and Hall of Fame! Major geek alert! We will get some guest passes soon, so let us know if you want to visit.

While at the EMP side of the house, we learned that Jimi Hendrix was a Seattle native, and Louie Louie was a standard anthem during the days of The Kingsman v. Paul Revere and the Raiders.

At the SF side, was saw a very nice temporary exhibit of costumes from sf movies and tv. On exhibit was 7 of 9's skintight blue ...getup (she was much shorter than you'd think, and no panties were allowed under the suit); Greedo's upper half (according to the museum, Greedo's identity is incompetent bounty hunter); and an actual Viper pilot jumpsuit from the new BSG. They also had Harrison Ford's leather jacket and some Indiana Jones paraphenalia; this is not strictly sci-fi, but to be forgiven.) We were also reminded just how crazy Harlan Ellison is. Very crazy.

A Wii Bit o' Trouble.


Over the past few months, we'd started having trouble with our Wii. It would just turn off right in the middle of play, with no warning at all. Then it wouldn't turn on until it had been off for several minutes. It had been getting worse, so I finally called Nintendo. A very nice fellow on the phone checked I'd gone through everything, and then said that I could take the Wii to Nintendo's Customer Service Facility at their Redmond campus.

The Customer Service office was very nice too. The counter lady took our Wii, said it'd be half an hour or so while they transferred our data to a new Wii, and we had a look around the office. They had a statue of Mario, examples of Nintendo products dating back to the the Hanafuda playing cards, and lots of Nintendo character swag for sale. Plush Animal Crossing characters, a Mii-themed rubix cube, Wii water bottles and such. I picked up a small metal pin with a Wiimote on it, which appears to be some kind of E3 2006 give-away.

Shortly, we were presented with a new (or refurbished, though we found no blemishes) Wii. They'd transferred our Nintendo Shop account, save games, and Miis. However, since Miis are attached to a MAC address (IE, a Wii) we are no longer able to edit any of the Miis we created. Also, we've got a new Wii code - so anyone out their with us as a Wii friend will need to update to our new Wii code: 1084 1164 6534 7102.

I'm very pleased with Nintendo's Customer Service, and I'll have no qualms about snatching up their latest, greatest products in the future. The Nintendo representative said that with the new Wii, our 1 year warranty starts over! And after the data was transferred, I didn't even lose my precious Legend of Zelda - A Link to the Past saved game.

Last Month

Next Month