He does it again

I am proud to say my design for Silentblue.net has been finalized. I may still work on a few tweaks, and the archives have to be redone, but the final site layout you see is frozen. While I’ve been working on this design since the birth of Silentblue on June 7th, 2003, but finally bit the bullet and deployed it. It has taken me two days.

Wrangling with CSS2 and DIV tags is no fun, but fortunately I had some tools that made the ordeal a little bit painful. The awesome glish.com CSS site explains how to make those crazy floating CSS columns in plain English (something the W3C doesn’t seem well versed in). The DevEdge Netscape Sidebar Tabs provides quick access to W3C’s HTML, JavaScript, and CSS reference guides right inside the Mozilla or Netscape 7 browser.

To top it off, Chris Pederick’s Web Developer Extension for Mozilla and Mozilla Firebird gives you a plethora of excellent website tools. Want to see what the site looks like in 640×480 or without any images? Want to view the CSS file or stored cookies? It’s all there. There are even web shortcuts to HTML and CSS validators. My favourites are the Outline tools, that automatically draw borders around DIV blocks and TABLE cells; they’re a great timesaver when fiddling with margins or looking for missing /DIV and /TD tags.

Unfortunately, these tools are not useable where they’re needed the most – when the viewing the site in Internet Explorer.:rollseyes: If you’ve ever been a web designer, you’re probably nodding your head now. You probably remember, with some affection, coding a complex yet beautiful standards-compliant site, only to spend just as much time working on hacks and workarounds to try to get the damn IE to display it properly.

Here’s a fun one:

<div id="boxcanyon">
<img src="images/boxcanyon_top.jpg" width=804 height=142 alt="" border=0 vspace=0 hspace=0 />
<div id="boxcanyon_middle">
<img src="images/boxcanyon_topoverlay.jpg" width=804 height=114 alt="" border=0 vspace=0 hspace=0 />


This code should display two images, one on top of each other, flush against each other. But IE will not make the two images kiss each other, no matter how much “padding-top”s or “margin-bottom”s you try. No, it only works if you remove all hard returns and spaces from the code:

<div id="boxcanyon"><img src="images/boxcanyon_top.jpg" width=804 height=142 alt="" border=0 vspace=0 hspace=0 /><div id="boxcanyon_middle"><img src="images/boxcanyon_topoverlay.jpg" width=804 height=114 alt="" border=0 vspace=0 hspace=0 />


It took me several minutes of alternatively fiddling with CSS and tearing my hair out to figure that one out. Well, it’s done now. It’s a major improvement over the old quick and dirty “Blue Plaster” layout. I’m not still 100% satisfied with it, but then again, there comes a point where you spend so much time slaving away at something, all you see are flaws… 😉