justaddwater.dk

I learned this nice little hack to bypass the standard browser setting that normally prevents background images from being printed.

The hack makes use of converting the background-image to a list item with an image.

/* Hack, to trick the browser to print another logo
   Unfortunetaly, Firefox on Windows doesn't show logo on print
    — see Mozilla bug 133490 for further details */
#header {
  display: list-item;
  list-style-image: url(../images/logo_print.gif);
  list-style-position: inside;
	margin: 0 !important;
  padding: 0 !important;
	height: 50pt;
}

This way, you don’t have to fall back to inserting an image tag in your HTML for the logo. Instead, just have an a element that contains the corporate logo text, and nothing all.

This entry was posted by Jesper Rønn-Jensen on Tuesday, September 29th, 2009 at 11:08 (CEST) and is filed under CSS, Code, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.