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.
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.
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.
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.
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
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.
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?