Print Style Sheet

[hayesha]

Hi all,

Currently I'm developing the printable version of the stylesheet for a project, There it has a Optical Character Recognition(OCR) module and I'm currently researching on developing the print CSS file that can directly output the required form to the printer which users can input the data, and make it read by the OCR module and update the system.

At the current moment I'm experiencing some difficulty in placing background image to div element which is an essential thing in placing four black boxes as shown in the attached image herewith. I have a problem in handling element with Internet Explorer because it's not parsing the CSS which I have used, along with this I'll send images taken with IE and Firefox. I would be grateful if someone can guide me on this.

Thank you in advance.

[jscheuer1]

We would need to see the code:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[hayesha]

Hi all,

Thanks jscheuer1 for your immediate response, The project I'm involve in can be accessed from here (http://demo.sahana.lk). Currently I'm working with a local copy where the necessary modification for the printable version is working, and here with I have attached the modified print.css file for your reference. There I have given the background: url(img/ocr_bg.jpg); to div element having the id="container" but it's not showing the image and when I place a background image with input[type=text] element it is displaying the image with FF but not with IE.

I would be grate if you could guide me a way to place a background image to a div element, which is a must I need to achieve.

[jscheuer1]

Well, this is nonsense:


@media print { * { background-image: white !important; color: #000; } }

and could even be causing problems. If it is already a print stylesheet, the media declaration should have already been made in the stylesheet link on the page using it. The background-image selector takes only an image as its value, not a color. So, assuming that this is already a print stylesheet as declared in its on page link:


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

it should be:


* { background-color: white!important; color: #000; }

or even:


* { background-color: white; color: #000; }

as !important is only for overriding other styles (in this case only other print styles, the sheet itself will override the media="screen" sheet).

Somewhat the same with this:


background-image: #fff url(img/ocr_bg.jpg) 0 0 repeat-y fixed;

It should be:


background: #fff url(img/ocr_bg.jpg) 0 0 repeat-y fixed;

Now, the problem with a background image for printing is that some browsers will automatically remove background images for printing, using !important may help with that:


background: #fff url(img/ocr_bg.jpg) 0 0 repeat-y fixed!important;

If it is a solid black color, consider using a background-color instead. In any case, large black areas are to be avoided in printing, unless you own stock in a company that sells ink.

[hayesha]

Hi,

thanks for the guidance.