Web page won't print

[Dervish1]

I'm working on my first web app, and have a simple version of the application working. It allows the user to create and edit a fantasy map from a set of terrain tile images - but I can't figure out how to make it print. A print preview (and an attempted print) shows just a blank page (or a blank page with the background image), but no sign of the existing map. The map is generated as a simple HTML table with each tile being an <img>.

The application uses the dojo toolkit for organization and several utilities, so I suppose it /might/ be related to that, but I seem to get the same problem without using Dojo. Do HTML tables with no data other than a background image print at all?

[LastMitch]

The application uses the dojo toolkit for organization and several utilities, so I suppose it /might/ be related to that, but I seem to get the same problem without using Dojo. Do HTML tables with no data other than a background image print at all?

What CSS did you try to used?

Did you include a style sheet like this:

http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

You can look at this:

http://caniuse.com/

I used that as a reference to see a list of which HTML5 & CSS3 code is compatibility for browsers. You have to understand if the browser keeps updating then more HTML5 & CSS3 code will be available to used.

[Dervish1]

At present, it's just a very simplified style sheet. Nothing specific to printing. The page is based on a simple BorderContainer, which seemed to be the problem.

I'll give the print style sheet a try. I had been thinking I needed to make a 'printer ready' page.

[LastMitch]

The page is based on a simple BorderContainer, which seemed to be the problem.

I have seen couple of members used dojo.

You mean this:

http://livedocs.dojotoolkit.org/dijit/layout/BorderContainer

You might have to used this too:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/*You print sheet style goes here*/
}

Have you try to used a div container rather than a html table to print out:

<div class="img">
<img src="image.jpg" alt="" width="" height="">
</div>

You can used a div container as a layout too:

<div class="Table">
<div class="TableRow">
<div class="TableLabel">This Map 1</div>
<div class="TableLabel">This Map 2</div>
</div>
<div class="TableRow">
<div class="TableCell"><img src="image.jpg" alt="" width="" height=""></div>
<div class="TableCell "><img src="image.jpg" alt="" width="" height=""></div>
</div>
</div>

For you CSS:

.Table { width: 30%; height: 50%; display: table; }

.TableRow {width: 100%; height: 100%; display: table-row;}

.TableLabel { width: 30%; height: 100%; display: table-cell; border: 1px solid black;}

[MidiMagic]

1. Get what you want to print on the screen.
2. Hit Ctrl+PrintScreen
3. Open MSPaint
4. Paste.
5. Either use Print Setup and Print, or save the file as a .jpg file and then print that.

[Dervish1]

Even with multiple variants on the print style sheet, print preview and print both generate a blank page. Print Screen, on the other hand, isn't exactly acceptable for a user (but it works!). Yes, it is a dojo borderContainer, as LastMitch pointed out. (And changing the table to use a div container was unfortunately no better).

For those who might be interested in seeing details, a minimally-functional version is at androhil.com/docs/cgi/mapedit/mapedit.php - wait a moment for the page to load, and hit print preview; the problem is obvious.

I'm beginning to think Dojo's styling of the containing divs is what's at fault. This suggests I'll need to open a separate 'print ready' window and just copy the table there. It'll take a little while, just given the amount of free time I've got.