CSS Off #2 - Earlybird

CSS Off #2 - Earlybird

Judging is underway for the latest CSSOFF contest, so, as promised, here's my entry , and here's the jpeg of the initial file we got. As I said before, I'm pretty happy with the results. Here are my thoughts on this entry.

Initial Impressions

The mock-up was definetely a lot prettier than last time around, which helps me enjoy what I'm doing. I could tell it was tailor-made for an elastic sort of layout, and there were some pesky curved borders, but overall it seemed not too bad.

Getting Started

For this one, I actually went through and made all of the HTML before ever touching any stylesheets or image editors. It was a kind of fun way to go through, and it helped me organize my mind about how everything should be grouped. Note: If you viewed source, you might see that I left almost none of the links blank. They all have hrefs like "/search?search_type=region&q=Earthworm" and so on. Why do I do this? I don't really know. I guess it helps me think the relationships between items through, and to group certain items certain ways, but I'm not really sure if it has any effect. It might simply be a little more geeky OCD.

The Layout

Getting the layout running was pretty easy. I used the technique involving negative margins for the sidebar, which gave the content a fluid width and the sidebar a fixed width. I also used a percentage for the space between the content and the sidebar, which I thought added a nice dimension when resizing the window.

The Main Content

This page is supposed to represent search results, so it was pretty easy to style most of the content. It's all supposed to look the same, anyway (except for the "related" result). Nothing incredibly exciting here.

The Search Navigation

The search nav is the rounded box at the top of the search results. There are, of course, billions of different ways to render rounded corners; I chose a fixed height, fluid width option. I'm not sure, in retrospect, why i didn't go for a fully elastic model for text resizing, but that's ok. I again used negative margins to fix those end-caps on the end.

This was also one of a couple of spots (the other is in the sidebar) where they had form controls (the "Group Related Worms" checkbox) with no visible submit button. Since it's a huge accessability no-no to not have a submit button, I included one and hid it with Javascript when the page loaded. I figured that in the real world, this form control would alter the results through AJAX, so using Javascript to hide the submit button works well.

The Sidebar

The sidebar was not really anything tough. The only real pain in the butt was the first list of choices; the answers for "How Early..." It wasn't a huge deal to float the list items (however, I think it was a silly choice and not very wise; what happens when you want to add another choice? It either looks bad, or you have to restyle it) but ie was giving me problems for a while. I ended up discovering that ie's default font size is larger than firefox's, so I added a conditional comment to reduce the default font size in ie.

The Search Form

The search form was the most interesting part of this assignment. Initially, I thought it was weird, since it's so hard to style form controls consistently in different browsers, but I figured it was doable. Then I noticed that the layer in the photoshop was titled "Search Box with Glow on Focus." Uh oh. That meant it had to look normal, and then start glowing when it recieved focus. And that means more Javascript.

I managed to make it look terrific in every browser except....Safari. Safari is notorious for it's habit of refusing to give up form styles to anyone. I could have served a different set of styles to Safari, but by this point it was getting late, so I decided that one browser incorrect would be an acceptable compromise.

In Conclusion

So, it was a very fun project, and I'm looking forward to the next contest. CSSOff only got 24 entries this time around (down more than 50% from last time), so hopefully there will be more next time. Also, hopefully that means we get results sooner. Either way I expect it to be more than a week until we hear word; in the meantime, what do you guys think?

Comments (archived for posterity)

  • Eric Wiley commented

    Dan’s divin’ right in there and wrastlin’ those CSS gators!

    Props to you. I hope I can join you in the battle some day soon. Looks to be an excellent training ground high-intensity learning.

  • Nate Klaiber commented


    I, for one, appreciate the geeky OCD and putting things in the links. I probably would have done the same.

    Also, nice call with the submit button - hiding on load. I see that as the best route to handling something like this. Hide the submit button and hijax the form action if you want to use JS, this way it can still be accessible to those without JS enabled.

    You put everything together very nicely. Page still looks clean when the browser window is expanded. Nice job!

  • Brad Dielman commented

    Awesome work, Dan. The fact that you were able to complete that in a 24 hour period is amazing! I will give the next one a try, it looks like a lot of fun (hard work, yes… but fun).

    Remind me to ask you for some tips on using negative margins at the next meetup. :)

  • Brad Colbow - Cleveland Web De commented

    [...] Dan took part in a the most recent competition and the writeup he did for it is a great resource for anyone learning how to design websites.ÂÂ? Since I’m pretty new to the tableless design scene I found the reasoning behind the decisions he made to be insightfull. Check out Dan Ott’s writeup here: http://danott.dev/thoughts/2007/07/17/css-off-2-earlybird/ [...]

  • asp kodlari commented

    css layer examples / properties and layer attributes