Last Monday at 11:30 a.m. I received a couple Photoshop documents and an existing HTML site constructed with tables. By 1:00 I had gutted the tables and converted the existing HTML files to dependent Dreamweaver template pages. By 2:00, I had extracted the necessary graphical elements from the Photoshop files. Soon thereafter, I completed the CSS for the home page. At the end of the day, I had a working site and even tested it a bit on multiple browsers and platforms.

The site: Univerisity of Pittsburgh Commencement 2005

The only tricky part was the use of a watermark-like background image on the subpage. I used a background image on the container for the blue sidebar. So I needed another container for the background of the watermark.

In some browsers the watermark image only extended as far as the main content, regardless of the extra padding I gave to the sidebar bottom to fake a minimum height. It should be noted the sidebar is floated left. So I added a clearing <div> to the content that held the watermark.

That helped some browsers but Firefox still stopped displaying the watermark background at the end of the #content <div> and not the #content-container <div>. I then had the idea to add min-height to the #content-container, remembering that some browsers, like Firefox, actually pay attention to that declaration. That fixed things nicely.