Funnelweb » CSS

Print-only stylesheets and the firefox bug

sg — Sat, 01 Mar 2008 08:25:55 +0000

One of the big benefits of using CSS-based design for a site is the fact that you can control the layout of printed pages.

Instead of users having to print out exactly what they see on screen, you can get rid of stuff like nav, sidebars and plug-ins from pages, enabling them to print out only say the main content.

Great! So there I was, merrily creating a print-specific stylesheet for my site ……. only to find that I then had problems getting the printouts to flow across more than a single page in – of all things – Firefox!

Yes, Firefox – the poster child of open source software -has a print bug in it. Sad to say, it all worked fine in IE6 and IE7.

The details and thankfully the solution are described on Jaffer Haider’s blog

The simple answer, it seems, is to add the overflow:visible property to any of the div elements you want to appear in your printouts for users.

The great CSS v IE6 challenge

sg — Wed, 13 Feb 2008 21:18:25 +0000

Everything worked so perfectly (ok, maybe not quite) in IE on my current site but I appreciate the days of table based layouts are limited. Once upon a time, good old tables within tables within tables sprinkled with a few one-pixel gifs was all you ever needed to achieve layout nirvana.

Now I struggle night after night with floating div tags, liquid layouts and inline content. Thankfully, the CSS manuals have de-mystified much of it. As has the website, www.CSS3.com. And my work colleagues – again and again.

It doesn’t make things any easier when Microsoft in their wisdom decide to provide IE7 as standard with Vista. And then advise you to use VMWare if you want to install IE6 on the same computer. Oh, kindly mentioning that its around a 200meg download, too.

Thankfully I was told about netrenderer. An excellent tool for checking page layouts in IE6 without needing to have it installed.

I just didn’t realise before embarking on CSS-based layout how much of a problem it would be creating styles that worked with IE6. After many wasted hours, I’ve now abandoned liquid layouts and given up with trying to precisely position content.

Maybe I’ll try again with version 2 of the re-design…. one day.

The beginning of a long journey

sg — Wed, 13 Feb 2008 20:44:24 +0000

After months of delays, the re-build of my website London for Free is finally underway.

It will be fun updating my web skills, getting my head around new technologies and reminding myself of “old” ones.

I’ve decided to re-build the whole site using standards-based design principles. Yes, pages using table based layouts are on their way out.

So I’ve spent my christmas break reading lots of CSS manuals and design books like Web Standards Solutions and Bulletproof Web Design, picking the brains of some of my esteemed colleagues regarding CSS design and collecting my thoughts.

And now I’m ready to get on with it.

I’ll use this site along the way to share my discoveries as I work through the re-build. Hopefully it will encourage folks who might be wanting to build their first web site or take their current site to a new level to get on with doing it.

So off we go………..