Having recently got my company's new website uploaded (finally - eventually I just uploaded and went on holiday), we discovered a problem with printing. The new design looks very nice at 1024x768, menu/text/pictures all well balanced. However, when you try and print a page the pictures and the menu squash the variable width text column to about an inch across (on IE anyway) and you end up with an inch wide column covering 17 pages.


I argued the case that only unreasonable people would expect something that worked well on screen to also print out perfectly, but then I've met many of our customers... Made some suggestions along the lines of uploading PDFs of our case studies for printing, or having a separate printable version, but only half heartedly seeing as how this would create a maintenance nightmare which would ultimately land back with yours truly.


I started to investigate using CSS and the <div> tag to position stuff on the page instead of tables, the theory being that I could then just swap stylesheets to create a printable version. After stealing some basic layouts from Glish.com I'd soon whipped up a passable imitation of our tables based design. Only area where I failed was creating a bottom box spanning two columns (the text and images) where the copyright and text links went, but I was prepared to settle for that.


Next up was stylesheet switching, I ended up stealing all the code from A List Apart, which made life remarkably easy. Whipped up a second stylesheet, made it alternate as described, added my javascript links and voila, one switching webpage.


Even managed to run it through the W3C CSS validator and get it fully approved. Tried to get the XHTML 1.0 Transitional approval too, but discovered the Flash embedding code doesn't validate...