Web standards compliance

Lecturing to university students is a daunting experience. While telling them how to design web pages one student asked how come only the first page of my own web pages printed out.

I found my web pages were effected by a known bug with printing in Microsoft Internet Explorer. If the CSS "float" property is used, then the part of the floated element is not printed after a page break. I use "Float" to position the main content of may page, so only the first page prints.

To fix this I added "float:none" in my print style sheet. The float is not really needed for printing, as it was used to wrap the main text around a menu, which is not displayed on the printed version.

While I was at it I found a couple of more problems, in the formatting. I had made any link text 95% the width of the page on the print version. That broke up any sentence with a link in it with large amounts of white space. I removed the 95% to fix the problem.

Finally I noticed that when printing with a small font then images tended to bunch up together on the page. The images are floated on the right, so remove the problem I added "clear: right". This way they got one under the other.

You might ask why I don't just provide a PDF version of the notes so they will print well. But the precise formatting control of PDF is not really needed for the notes. Also it can impede readability, as with a web page the user can resize the text, omit images and the like, for printing. New standards, such as CSS3 Paged Media, should all but remove the need for PDF, by providing control over headers, footers and the like in web pages.