As much as we've been trying to avoid it, Ames and I started thinking recently about our car situation:

We have a 1997 "Mommy Car" Camry that after replacing the AC compressor, we're worried is about to hit that maintenance prone part of it's life. Our other vehicle is a 1995 S-10 pickup with power nothing and a dead AC. Neither of which are really road-trip worthy vessels, and with the impending move to South Carolina, we've definitely got some road trips coming up - soon.

So we needed to do something. The weakest link is definitely my truck. Amy can't drive it because it's manual, and for all I know the thing might not even make the drive up to South Carolina. As pathetic as it is though, I'm really fond of my lil' red s-10 and would gladly drive the thing into the ground before trading it for another vehicle. Luckily, Amy doesn't feel the same about her Camry. We actually bought it as a rushed replacement for her beloved 92 Accord (with a sunroof) that was rear-ended and totaled in February of last year.

• The Idea: Ditch the Camry and get a newer used car that we can depend on.
  
• The Roadblocks:
  1. If we sell the car first, we'll have no time shop since Amy needs a car to get to work and cannot drive my truck.
  2. Even if we got what the car is worth, that leaves us with a budget for a similar year, high-mileage vehicle.
• The Solution: Figure out what we want, and what we want to pay. Go car browsing the dealerships on Easter Sunday when there are no salesmen. Get pre-approved for a used car loan. Go back to said dealership Monday night after work. Buy Car!

The newest member of our family: She's an 02 Honda Civic EX with under 38k miles, power windows/locks, keyless entry, CD player ...and of course, a Sunroof.

I’ve been averaging about 2 hits per minute since about 9pm last night when my site was featured at css vault. I know when I’m checking out sites at CSSVault, I want to know from the front page who the person is, what inspired them, and what I can learn. It’s kinda weird being on the other side of that, but as a result, I felt like you all deserve a quick welcome and explanation of my design.

The design you see here has been up now for about 4 months and was inspired mainly by a visit to a creepy old abandoned house in my hometown of Vero Beach, FL back in February of 2003. While I was there I found a postcard book filled with actual letters and postcards from the turn of the century. As a designer, I was amazed by illustrations, the worn edges, and the typography of these incredibly well-preserved artifacts and decided then to use them someday…somehow.

The picture above is an actual scan of one of these postcards. Seriously, no effects were added when I was saving this image- the wicked worn look is authentic. So that’s the look I was going for with the site. I wanted it to feel like a turn-of-the-century postcard, or a page ripped out of a Sears, Roebuck and Co. catalog.

In my professional work, I try to involve web-standards and eye catching design wherever possible and strive never to do the same thing twice. For those looking to my site for inspiration, my advice is to keep your eyes open. Good design can come from the least expected places, even a creepy old house.

I have seen so many “hacks” to fix CSS layouts in IE that sometimes they all sort of run together in my mind. So, when one of the layouts that I was developing at work started randomly hiding elements, I thought it might be related to the “peek-a-boo” bug, but couldn’t remember what the fix was. The affected blocks would just not show up as the page loaded in IE. Sometimes rolling over links would make one of the blocks disappear or reappear, but they seemed to all be acting independently. See the two examples below:

Before Magic Beans:

In Googling for an answer I came across what is perhaps the best summary of IE bugs, as well as one of the most intuitive solutions to them. In a thread on Webmasterworld, DrDoc explains that although “position:relative”, “line-height”, and “height” solutions to the Peek-a-boo bug work, they overlook the main problem.

So, all this got me thinking — there must be an easier approach? After all, these are all various display bugs that… Wait a second! “Display” bugs? So, perhaps the display property may hold the fix? The fix for the doubled margin bug may not have been a coincidence!

And, in fact, it appears that the display property holds the answer and solution to all of the above bugs. Finally, no need to memorize different bugs or different solutions, hacks, their pros and cons. There is just one bug, and one solution!

His solution was to set the display property of elements affected by duplicate characters and doubled margin to inline, and for the rest of the bugs (including Peek-a-boo) to set the parent or wrapper div of the affected elements to display:inline-block. Inline-block is currently in the candidate release for css 2.1, and IE is one of the few browsers that actually impliment it. I created a “fixdisplay” class which I affixed to the containing blocks of all the elements performing random disappearing acts and…viola! No more disappearing/reappearing blocks. Just to be safe, and since this is only an IE thang, I defined the class in a way that only IE understands:

* html .fixdisplay {display:inline-block;}

Fee-fi-fo-fum, Browser bugs are not much fun.

Dear Amy,

I am pleased to tell you that the Department has recommended that you be admitted to the doctoral program in Chemical Engineering at the University of South Carolina, effective for the Fall 2005 term.

Like all doctoral students, you will be supported financially as a graduate Research Assistant. The details will be forthcoming in a letter from the Department, as well as the official offer letter that comes from the Graduate School.

If you would like the Department’s letter to be sent to you by fax or mailed to some address other than the one in your original application, please let us know immediately - this letter will go out in a day or two. The Graduate School’s letter will be sent by regular mail and will go out sometime in the next week.

With the Department’s letter, you will receive a form that you will use to let us know if you accept our offer. We would appreciate your reply as soon as possible so that, if you decide not to join us, we can make an offer to another applicant.

Congratulations and best wishes!

I’ve always thought of myself as an enthusiastically positive, and easy-to-please person. I’ve always maintained a set of personal beliefs, interests, and opinions but strive not to impose those upon others or judge anyone by any kind of standards. I’ve never really been one of those people who fit into any of societies molds, so accepting other peoples incongruities has always been a priority.

Selfish, cocky, and opinionated are words I never thought would be used to describe me, but it seems that working as a designer has really brought to the surface some ugly traits. Working on an art project with Ames recently caused an argument which, although I didn’t see it at the time, could only be explained by my own obstinate refusal to be open minded. Realizing that this wasn’t an isolated incident, we talked out the issue and I decided to try a little harder to be more easy going. Since then I’ve been trying to be more introspective, especially when handling situations where I have more experience than Ames.

Today though, during a “conversation” with one of my co-workers about how a certain website design company’s look was not the design direction we want to be moving in, I really couldn’t help but take note of my own dogmatic approach to the conversation. Instead of being a team-player, looking for the positive in the work, and offering constructive reasoning, I shot down the designs using web-standards and efficiency as my weapon of choice. I think the words, “Well, you used to think that way.” were what really brought me back down to earth. Being a designer sometimes requires a willingness to go against the flow, but being an employee; and more importantly a husband, requires a willingness to set aside selfish egotistical ideals, and work as a unit. Besides, who wants to be known as a pompous asshat?

Editor’s Note: Apologies for the foul language, I’ve just been amused with that word since I saw if for the first time on airbag. I actually heard someone say it on TV last night…so that makes it ok to use in my blog, right? :)

Inspired yet again by Russ’s ingenuity, I have a contest for you all to participate in. The winner gets bragging rights. I’d offer a gmail account, but I heard they’ve gone public, so who cares. The other day, I posted about the possibility that Russ could have actually created an app to convert an mp3 file to a viewable image which could in turn be converted back into an mp3. Well, he’s already on version 2 of that app and has added the ability to use a jpeg to “hide the file in” when converting to a bmp. Confused? So was Amy when I tried to explain it to her this morning when we woke up. I’ll try to break it down:

• You have a secret digital file (movie, audio, etc.) you want to send someone, but are worried about that file getting intercepted.
• You want to convert that file into a bitmap image to confuse anyone who might intercept your file.
• You choose a jpeg or gif that you would like to make the file look like.
• You use the conversion utility to turn your secret file into a bitmap, using your jpeg or gif image so that the image doesn’t just look like static.
• You transfer your secret file to your friend.
• Your friend (who has the conversion utility) can then “unhide” your file from the bitmap image.

Now for the contest. Click the image above to download a zip file called mysterysong.zip. Inside that zip file will be two files: mysterysong.bmp and bmp.exe. Your goal is to get an mp3 file from the bitmap and tell me what song it is. You will have to run bmp.exe from within a command window followed by a question mark to get the help text. Then you will want to convert file.mp3 using the “unhidefrom” command. Using the “mysterysong.bmp to file.mp3” command will create an mp3 file of the right size, but it will not play - so be sure to use the “unhidefrom” command. The jpeg above is what the bmp in your zip file should look like. Acceleration programmers are prohibited from giving away the answer. :) Good Luck!

Russ, Nathan, Ryan, and I were having a random conversation last week about music piracy and Russia’s Allofmp3.com loophole, which led to talk of other possible legal loopholes for MP3s. The conversation kept revolving around the idea that a number cannot be copyrighted, and that all digital files are exactly that - a number. So this led to the idea of creating a program that could convert the binary number of a music file into an image file. Distribution of these images would not be illegal, given that the explicit purpose of the files be for visual enjoyment. The implicit ability to convert these files back into audio files would therefore not be the liability of the distributor. Well, Russ took this conversation all too seriously:

This is a segment of an image that was no-doubt created from an mp3 of his. I’m not sure what song it is, or how he actually created it, but you can view this “song” in its entirety on his latest post: “A Lost Cause”.

Update:

I just noticed that this post has been getting a lot of traffic lately from people looking for the SxSE festival in Myrtle Beach, SC. Somehow it has bubbled to the top of Google’s index on the topic even though it was from last year and was about my inability to make it to the SxSW Interactive festival. Weird. To anybody I might have confused, I’m sorry. To exclude search results that are talking about SxSW, try searching for “sxse myrtle beach”. Hope that helps!

Continuing on with the old post…

I’ve known that it was coming. How could I not with all the buzz about it for the last few months? The truth is that I would love to be at South by Southwest (SXSW). In the past week alone the following people have posted about packing up and going down to Austin:

• Andy Budd
• Dan Cederholm
• Andy Clarke (Malarkey)
• Mike Davidson
• Jon Hicks
• Cameron Moll
• D. Keith Robinson (Asterisk)
• Richard Rutter (Clagnut)
• Jason Santa Maria
• Web-Graphics
• Digital Web Magazine

But like Jeff Croft, I won’t be there. There’s just too much up in the air right now. Financially, Amy and I are saving up for a move to a location we don’t even know yet. She’s in that weird holding pattern between graduation and hearing from PhD programs. We’re pretty confident that she will get accepted at the University of South Carolina in Columbie for the Fall, but we can’t start making plans till we get that letter/email. Which means we don’t know if we’re even going that direction, which means that I can’t start looking for employment, which means we can’t set any kind of budget, which means no major purchases for a little while, which means plane tickets to Texas.

There’s times when we (at least I) don’t think about the impact of all this, and just go about life as normal. But there are other times when you can cut the tension with a knife. One of the biggest issues is that our extension for living in on-campus married housing here at UF expires on April 18th. It would be nice if we could stay there in the same apartment until we’re leaving Florida, but if we can’t get another extension, the reality is that we’ll be putting our stuff in storage and finding a sublease - or moving home - or something.

Regardless of all the circumstances and uncertainty though, I stand behind my wife. As long as we’ve been together, it’s been her goal to get a PhD in Chemical Engineering and its my goal to encourage her to pursue that dream, but there’s not much I can do to encourage when we’re playing the waiting game. In the mean time, I’ll be praying for an acceptance letter from South Carolina - soon!

Last July, I bought a GPS receiver so that I could make Amy “hunt” for a present that I bought her and so we could try out geocaching on our anniversary trip to St. Augustine. We haven’t been out much looking for cache’s, but the time we have spent has been a lot of fun. About 6 months ago, I decided to hide my first (and only) geocache in the courtyard outside the office where I work. The cache is called Runningman’s Jungle and is a slightly tricky cache to find because of the amount of traffic during the day, and the open cement roof tends to obstruct the GPS signal.

Since then, my coworkers and I have had quite a bit of fun watching people wandering stealthfully around the complex, trying to find the cache. To add to the fun, I setup a webcam that points to the area where the cache is hidden. Using a program called Active Webcam, I was able to have the cam take snapshots on motion detection rather than just sending them to the website. The problem with the motion detection system is that it tends to either be too sensitive and save an unmanageable amount of snapshots, or too oblivious to movement that it misses when people are near the cache. For that reason, I have long since turned off the motion detection system. While I had it on though, I caught some of Gainesville’s most prolific cachers, and thought I’d finally post them up.

Suemac was the first to find the cache. She was here during the day with her daughter, so I actually got to meet her in person. I’ve since learned that she’s not very nice when it comes to hiding micro caches.
They’re always so hard to find!

Esco, getting closer…

SwampKing, just about to jump the wall to get to the cache.
According to the logs, he was here with SwampQueen.

I consider myself pretty well versed in the art of standard compliant css layouts. Somehow I’ve picked up enough about CSS to be considered an expert around the office. I routinely get asked all sorts of questions about how to do this or that with css by my co-workers. I take a humble approach to this position, but I really enjoy it when I can answer their questions. Things aren’t always so happy-go-lucky though in my dealings with cascading style sheets. This is usually due to a particular inappropriate expletive browser that routinely likes to hit below the belt. Lemme give you a rundown of two swift kicks I received from Internet Explorer in the last 24 hours:

Blow Number 1:

The programmers were trying to create a tableless progress-bar control to work into the Fileyeti interface we created. The idea is pretty simple. We would have a an empty div that’s set to a specific width and height with a background image that has it’s position set dynamically based on the particular statistic we wanted to show.

In exploring this solutions we found the following IE inconsistency:

1. In other browsers besides IE, this div renders 2px high as specified. In IE, it shows up 19px tall…try it out.

   Rendered:
   
   HTML:

   <div style="border:1px solid black; height:2px;"></div> 
   

2. In this example, we set the line-height to 0 which allows IE to render it correctly at 2px tall.
   Update:But not in this blog entry for some reason. Try cutting and pasting the html below into a blank html page.

   Rendered:
   
   HTML:

   <div style="border:1px solid black; height:2px; line-height:0;" ></div>
   

3. But… Once we add a background or background image - BAM! She’s back to 19px again!

   Rendered:
   
   HTML:

   <div style="border:1px solid black; height:2px; line-height:0; background-color:red;"></div> 
   

4. Toss a 1px square image in there (it doesn’t matter if it even exists), and you’re back down to 2px again.

   Rendered:
   
   
   HTML:

   <div style="border:1px solid black; height:2px; line-height:0; background-color:red;">
   <img src="0.gif" height="1" width="1" alt="this image doesn't even exist!" /></div>
   

5. Oh, but wait… there’s an alternative:

   Rendered:
   
   HTML:

   <div style="border:1px solid black; height:2px; line-height:0; font-size:0; background-color:red;"></div>
   

Blow Number 2:

This one made me feel like going back to last week to figure out when I missed the boat. With most of the sites I develop at work, I try to limit myself to linking to one stylesheet from the html pages. That stylesheet exists to lay down some basic rules for all browsers, and then imports the layout stylesheets so that browsers incapable of doing so (like Netscape 4.x) cannot muck up the page. Well I tried something new with one particular site. I wanted to import a stylesheet specifically for print after all the layout had been established, so that I could rearrange the layout divs a little to make it look nice when printed. Now this is a CSS2 technique, so I knew I could possibly have some problems, but the proper way to do this was to add the media type after the url like so:

@import url("stylesheetname.css") print;

I was so happy when I opened up the print preview window in Firefox and printed to see that it behaved exactly as I wanted. When I opened up IE6 however, No Dice. So then I set my imported layout stylesheet to screen using the same method and the page looked completely unstyled. After some Googling, I found that Internet Explorer WILL NOT import a stylesheet with a mediatype different from “all”. OUCH!

The workaround for this one was pretty simple. Being as inconsistant as IE is, I thought “Hey, if it doesn’t like one CSS2 spec, let’s try another one!” Another way to set media types in CSS2 from within a css document is to wrap them in a media block like this.

@media print {
   #page {
       width: 85%;
       }
}

Sure enough, Internet Explorer printed the page correctly after I cut all of the css from my print stylesheet and pasted it into my new @media selector at the bottom of my layout stylesheet. AAAAARRGGGHHHHH! Why can’t everybody just use browsers that WORK!

Ames and I are surrounded by friends that are having babies these days. The latest addition to that list are Robby & Megan Fanelli, who just had Robby Jr. on February 27th (the day before my birthday!) We don’t plan on having kids anytime soon, but you have to admit that he is a cute one. …and he’s grown so much since the last time we saw him!