Over the past few weeks I’ve been redoing the Mid Hudson Astronomical Association website. It looks like this:
Yes, it’s dark, but that’s when astronomy happens. The site is built on Drupal, as I’ve gotten some experience there recently doing sites for the Poughkeepsie Farm Project and MHVLUG. For people that want to know more about the tech side, I’ll be giving a talk in January at MHVLUG.
I did come across one really odd thing in working on the three boxes (I was calling them chicklets, but they look less like that with content in them). Round corners in CSS are awesome (thank you w3c). IE9, at least the version in Adobe Browser labs, still doesn’t support it (really Microsoft? I thought you were getting down with the standards). While a TD can have a round background, it’s border is always square (I almost understand why, but it definitely limits what you can do. It also took me a while to realize this was happening as the round is subtle enough on the front page). Div height 100% doesn’t work inside a TD (it seems like it should, but no one implemented it that way).
So the only way to get 3 columns that correctly degrade to 2 columns (50% of screen each) when one is missing (there will not always be a special event), have round borders, and be the same height is…. jquery. While on the one hand, it seems crazy, on the other hand, yay for jquery. You can view the source on the website to see how I did it.