Pew Pew Laser Blog

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

Past Blogs

Equal Height Columns.

5.27.2007

Back in the old days of web design - when a properly wrangled table was all the rage - it was easy to create multiple columns of the same height. Doing so with CSS has proven tricky - mostly due to the auto-expanding boxes. Many of the existing solutions to this problem use JavaScript or extra divs and background images, or don't even work in IE6. I find those to be rigid and sub-optimal solutions.

I propose a new solution to the problem of creating columns of equal height in CSS. This solution is simple, JavaScript free, degradable and highly flexible. Messers Goomba and Starman will demonstrate:

 

It happened again today. I was just walking down the street, and BOP!, some damn plumber jumped on my head.

 

Doo doo doo dah doo doo dah doo doo!

Both of those boxes are a simpler variation of the fixed width Goomba box, and they have two background images to create a fancy-schmancy box. The key to the equal height columns is .box { min-height: 12em; } which is applied to the .box that contains both the Goomba and Starman Quotes. I've specified a minimum height for both boxes, no matter how large their content is. Furthermore, I've done it using ems as the units - ems are a unit of size relative to the text size that's being displayed. So, as the text size of the browser increases, the height of both boxes also increases. For your boxes, just select a number of ems that's slightly taller than your tallest box.

There are a few oddities to this solution, but for the projects I've developed they've not been noticeable.

HelpUsBuyACar.com

5.22.2007

One of my personal friends started this HelpBuyUsACar site. It's all true - they do have really bad luck with cars. I am interested to see if yet another cyber-begging site can work. I'm referring to SaveKaryn (Wikipedia), SaveToby Wikipedia, even the one red paperclip guy. After all, usually only the first entrant into this field is successful; the rest are seen as uninteresting at best, or copy cats at worst. On the other hand, I wonder if $3000 is enough money to buy a good car - one that doesn't need be repaired every 6 months.

When I first visited the HelpBuyUsACar site, my initial reaction was It burns the eyes!!! I'm a professional web designer and developer, and I really just can't take that hat off. And do not look at the source code - yowza. But I'm starting to think that part of HelpBuyUsACar's charm is it's 1999-era webdesign. If the site was slick, would anyone think they needed money? Still, I may need to give the site a once-over to help it's SEO rankings...

Let the Games Begin.

5.21.2007

You know how in Portland, The Rack is faux dingy warehouse? Last week I went to The Rack in downtown Seattle, assumedly the original one, and it is authentic dingy warehouse. I did find what I was looking for, however. I got some new simple black shoes ($50, originally $140) , and a pair of slacks for only $16. Score! I love saving money.

The impetus for this lunch hour trip to The Rack was my cousin's wedding in Corvallis. We had tons of fun at the wedding, and it was wonderful to see the whole family. I really wish I could have spent more 'quiet' time with them. There was an ad-hoc breakfast the next morning, that was in Corvallis too, and that's a good 2 hour drive from where the hubby and I were sleeping. Sigh. If we'd known in advance, we could have made it happen, but I guess that part of the family just doesn't operate that way. Ah well.

There will be more weddings this summer, so bring it on. ;)

Final Kingdom Hearts II Thoughts.

5.17.2007

Last night I finished up with Kingdom Hearts II. I'd whipped through the first 50 hours, up to the point where you enter the door to the final boss from which you can never return to the rest of the game. From there I intended to do ye olde backtracking, gathering levels and swag so that the Moogles would create better equipment for me. Eventually I got tired of the collecting, and distracted by new and shiny games, and I never got around to finishing. I'd really enjoyed myself at the time.

I finally popped it back the PS2 and jumped through the final door. There were sufficient rounds of the requisite 'boss expansion phase' and a lot of frantic button mashing at the screen filling king / metal dragon / metrosexual in a cloak. Then after that was lots of "We're friends forever!" and "I'm part of the darkness." and "You're part of the light now!" nonsense in the final cut scenes. Having the characters say the same pseudo-mystical-eastern foolishness over and over doesn't make it any clearer.

It was all very unsatisfying. Perhaps I've changed a lot as a gamer, but the button mashing made me mad. I want strategy, not whacking, in my RPG. Anyhow, I'm going to sell / trade in both of the Kingdom Hearts games for the PS2. If you'd like to get them instead of GameCrazy, let me know. I'm also going to get rid of Animal Crossing: Wild World for the DS. I have some awesome stuff in my AC house. I've got a Starman, and a bunch of moon themed stuff, even the flooring. If any of you out there are still playing AC:WW and would like this cool stuff, also give me a holler.

Troubleshooting.

5.15.2007

Some thoughts upon troubleshooting theory. Two methods of troubleshooting exist:

  1. Things you do because, based on your knowledge of the product, you suspect it will make a difference.
  2. Things you do only because you can.

Our DVR has been acting comcastic lately, by which I mean craptacular. It refuses to respond to the remote, it freezes or resets in the middle of recording, et cetera. There are exactly two things you can do with the DVR, both of which are troubleshooting steps of the 'becuase I can' varitey.

  1. Turn it on and off using the power switch.
  2. Turn it on and off by unplugging it.

Even though these steps have never failed to resolve the issue for the moment, we've had to do these things far too often. Grrr! The stupid thing should just work.

2 comment(s).

Advice for the Menfolk.

5.13.2007

The following advice is for all you gentlemen wondering how to go about acquiring a new Xbox 360, without irritating your ladies. Herein lies the secret:

Saturday Frolics.

5.8.2007

Last Saturday was busy, but fun. My little sister and her fellow (who I've nicknamed Sailboats) drove up for 24 hours of whirlwind entertainment, Seattle-style. Lil Sis played with our Wii, and enjoyed it greatly. Breakfast became a Luna Park situation, and after that we went to the Science Fiction Museum. We then hit Pike's Place Market, and Ye Olde Curiousity Shop. We had a lovely meal at Ivar's original Acres of Clams, dessert at the Rock Bottom Brewery, and then went to the main event of the night - Edward Scissorhands. About Scissorhands, it was billed as a 'wordless musical', and in fact, it is a ballet. They didn't really need words to get their point across, but there was a good deal more skirt twirling than I'd initially been prepared for. It was fun, regardless.

I was informed by my little sister that my blog is 'secret' because it's not on MySpace or even LiveJournal. Sigh. She also showed us the famous Mario Frustration movie. You may have seen a link for this, but been turned off by the 23 minute playtime. Believe me, it's completely worth the whole 23 minutes.

IE and .PNGS - Fini.

5.7.2007

You've looked at your site's statistics, and decided to create some .GIFs for your early IE users, so that they can view your site without all the ugly backgrounds that IE adds to your beautiful alpha transparency .PNGs. Here is a recap of why:

Here's the best may to get it done. (This walk through uses Photoshop CS2; adjust your steps accordingly for other tools.)

First, set the foreground color to the background color for your .GIFs. Then, open up one of your beautiful .PNGs.

In the Actions palette, click the 'New Action' button - shown right. Give it a name (I've used "PNG into GIF") and click Record.

In the Layers Palette, create a new layer - this will be called Layer 1 by default. Then click and drag Layer 1 below the existing layer (Layer 0) for your .PNG. Make sure that the new layer (Layer 1) is highlighted.

Now select the paint bucket tool, and click anywhere on the image. Easy! The penultimate step is to save the image.

From the file menu, choose Save For Web. Be sure that the file type is set to .GIF, and click the Save button. Go to the appropriate location, and then save your new image.

Last, click the 'Stop Recording' button in the Actions Palette. (Example shown right.) You can now close the original .PNG, without saving the changes.

Now, whenever you need to make a .PNG into a .GIF, you can simply open up Photoshop, set your foreground color, and then click the Play button (in the Actions palette). If you need to create even more .GIFs at once, use Photoshop's Batch processing.

Now that you've created the .GIF images, just use some conditional comments to override the .PNG background image declarations with the .GIF background image declarations, only for early versions of IE. Example:

<!--[if lte IE 6]>
<style type="text/css">
#header { background-image: url(images/header.gif); }
</style>
<![endif]-->

Simply use create a new declaration for background-image with the new .GIF file specified. The other background properties such as repeat and alignment will be retained.

Conditional comments will always be ignored by non-IE browsers, and are designed specifically for the purpose of delivering code to certain versions IE only. They are a much tidier way to deliver browser specific CSS than using hacks or browsers detection scripts. You can learn more about Conditional Comments at Quirksmode.org.

IE and .PNGs Continued.

5.4.2007

As I continue on my discussion of using .PNGs in IE, please note that you must view this page in IE 6 or 5.5 to see the effects of the scripts.

The first solution I investigated is Bob Sola's pngfix.js solution. It is essentially based on the AlphaImageLoader filter. The clever part is that it uses JavaScript (hidden in conditional comments) re-writes the HTML tags for the .PNG images as needed. Mr. Sola has conveniently provided a nice plug-in solution for the problem, but there are still too many limitations for it to work for me. ("CSS backround PNGs not supported") - D'oh!

Mr. Goomba - Border, but no height or width. Starman - No height, no width, no border. Fireflower - Height & width, but no border. Secondly, I looked at Angus Turnbull's CSS-Only IE .PNG solution. It works by using CSS to apply a behavior (another IE-only scripting method) to the troublesome .PNG images. (Quick & dirty install instructions.) It still relies on the AlphaImageLoader filter, so no support for IE earlier than 5.5. Also, don't try testing from a local directory on your computer; the .HTC file seems to require that the page be hosted from a server. But it actually works pretty well, as you can see on Fire Flower, Starman and Mr. Goomba here. You've got to be careful with your borders & height/width tags - see how Mr. Goomba is a little fuzzy here? Also, the fix only applied itself sporadically on when used page; which is what's causing the sidebar elements to be too long, and hence the whole sidebar doesn't fit floated next to the main content. I'd say it's a reasonably good solution if you're dying to go this way, but it's not yet perfect.

After looking at all these script-dandy solutions, I haven't found one flexible enough to be worth the effort it takes to implement it. The ROI just doesn't exist for me. Particularly since IE7 does handle the .PNGs well enough, so the future is looking up.

IE6 isn't gone yet, so it still needs a solution for websites that must degrade gracefully. The solution I'm going to propose isn't clever. It's dead simple, requires an absolute minimum of code, and provides a semantically appropriate solution for IE6, IE5.5 and earlier. My solution is to make .gifs. Next time, I'll give you a Photoshop tutorial for changing all your .PNGs into .GIFs for IE only. If it's worth it to you...

Last Month

Next Month