Matthew Knott

In any information-based website, it's important to remember that people will possibly want to print your information off. 

This could be for any number of reasons, passing to a friend, saving for your own purposes, or supporting a business case to buy a product.

When they do, they will get a mess, bits of navigation, images, cut off text. The end result is you or your customer lose business, or look unprofessional.

To fix this, use a print stylesheet. A print stylesheet is used only when printing and lets you sweep navigation and other unwanted information under the carpet.

If you're viewing this article on it's own, go to print preview and see what happens. All the navigational elements go and you're left with a nicely formatted document ready to print (Aside from the google ads which I haven't hidden yet).

Creating a print stylesheet should be the last thing you do, that way you're not constantly changing it through the project lifecycle.

When you are ready to implement your stylesheet you can add it in one of two ways. To include the stylesheet using the LINK object:

<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

Or to use inline styles use:

@media print {

/* style sheet for print goes here */

}

Either way achieves the same result. When compiling your print stylesheet, use display:none; to hide individual elements. 

Ensure any content containing div's are set to full width so that the full page is utilised.

Finally, consider colours, not all browsers allow background printing, you should bear this in mind. Minimise the use of colours in your page to improve the reproduction on laser printers.

Providing a drastic change from screen to page can set you apart from competitors and give you that slight edge. It's a little detail that can make a big difference.

Tags: Tutorial Stylesheet css display Print Professional Hidden

This article really encapsulates a lot of the things that frustrate me about Microsoft's "I know best" attitude to it's web browsers. The purpose of the W3C Standards is to facilitate a common experience across all-platforms and browsers.

This site is something of an ongoing project for me, I've tackled advanced apache configuration through my work with mod_rewrite, cloud trees, which were mild challenges, but nothing compares to the sheer hair-pulling that comes from trying to get your site looking good cross-browser. This site, for example, great in Safari, Firefox, Internet Explorer 7, and Opera, yet I have margin issues in Internet Explorer 6.

This is frustrating as a developer because it means valuable time is wasted trying to flush out happy mediums, often forcing compromises on excellent designs.

IE 7 represented a step forwards in terms of compatibility, but there is still a long way to go before developers can rest assured that their site will look the same in each and every major browser.

My particular problem related to the infamous margin-doubling bug in IE6 when working with floated elements. This is documented in numerous websites, and the recomended fix is to use display: inline.

This resolves the issue, although totally against W3C guidelines. Plus, if you're using an element that requires the display property to be set to block, you have even more tinkering to do that will probably force you to deviate further from the set standards.

After some experimentation, I found that the display: inline-block existed, fixed the bug, and retained the properties of a block element insofar as the padding etc was still correct.

Tags: Standards Browsers Microsoft Design Safari Firefox Opera IE Internet_explorer css inline-block inline display property