Monday, August 9, 2010

Can not print DIV background & TABLE layout

Sometime, you wonder why could not print the background of DIV and TABLE. Of course, you will take a look at your HTML code, or read the article on MSDN or found something on the internet after google the key of issue.

If you can not print the background or the layout you saw after review the print then please do as a following things:

1) Be sure that DTD is referenced correct. I mean if you are working on Master Page (it's often used the DTD to format the layout). It look likes:

Some DTDs disable or enable some of attributes of DIV tag and TABLE. Sometime you can not get its offsetWidth or its offsetHeight because of using DTD.

2) Ensure that your browser allow to print the background

For IE: go to menu Tool -> Internet Options -> Click on Advanced Tab -> Scroll down and check Print Background
3) Check the code.
If you never use DTD to re-design your layout, you should check the following things:
Please take a look at code:

<div style="float: left; height: 50px; width: 75px;">

^lt;div style="float: left; height: 50px; width: 125px;">
How are you doing?</div>

When you print or print-review, you only see Hello or even nothing is shown on area printable. When you use float:left, print media did not understand that attribute, so the height of DIV will increase and pull down the text, you won't see the data. 

Solutions: just change DIV to SPAN and remove "float:left" or "float:right"

<div style="overflow: hidden;">

your HTML content

When you print or review, the content shows like this:

Even thought you had been formatted the layout as well.
Solutions: just remove the overflow:hidden

No comments: