Hello, I have been trying to work this out - I need to create a page with a fixed border around it that will have a varying sized logo towards the top with one line of text in the center of the page. This will be converted to pdf so the 'page' needs to be the size of a standard page. Is there a way to do this without having to put in a whole bunch of <BR> tags? Here is a sample of what works with the <BR> tags (this is part of a JSP file): <html> <body style="border-width:1px;border-style:solid;border-color:black;margin:10px;height:100%"> <% for (int i = 0; i < 5; i++) { %> <BR> <%}%> <center><img src="<%=img_file%>"></center> <table height="100%" width="100%" style="position:absolute;top:50%"> <tr><td> <% for (int i = 0; i < 15; i++) { %> <BR> <%}%> <div align="center" style="position:relative:top:-50%" class="black20Arial"><B>This is text</B></div> <% for (int i = 0; i < 36; i++) { %> <BR> <%}%> <td></tr> </table> </body> </html> Because I need to accomodate varying image heights I need something that works without the <BR> tags that will center the text horizontally and vertically on the page and put the image a few lines above that text.
The amount of funky CSS and HTML to get a page that will be converted to PDF is ridiculous. Don't turn an HTML page into a PDF. Make a PDF (in whatever text editor) and make a separate HTML page. Or if there's not supposed to be a real HTML page don't make one at all. Web pages work so completely different from print medium. If you insist on trying to turn fluid web page into a document made for printing, you'll prolly need to do this: body { set the border you want; width: 750px; (this is a typical a4 printed page width on portrait with some sidemargins... you could go up to I think 770px but you'd need to practice and play with a printer) height: I forgot how many "pixels" a page is but pixels are screen dependent... it's somewhere around 1000px; for non-IE browsers, display: table; (tho it will work in IE8 as well) } #page { display: table-cell; text-align: center; vertical-align: middle; } img { whatever; maybe border: 0; } h1 { font: bold whateversizepx "arial black", arial, sans-serif; text-align: center; } (you might need to make the h1 display: inline, I forget with display: table) You can increase space between the image and the text by either adding top-margin to the h1 or you can even get away with adding top padding to it. Whatever works. assuming a doctype, etc. <body> <div id="page"> <img src="blah" width="x" height="x" alt="some alt text"> <h1>Texttitty text text text</h1> </div> </body> etc Display: table lets you use vertical-align: middle to vertically center the text and image. Most browsers seem ok with just a display: table and display: table-cell boxes but some (safari? firefox?) also want a display: table-row box sandwiched in between. But really, just make a pdf and imitate it later with real HTML. I've been turning nasty crappola pdf's into HTML for the last few weeks, it's terrible when the PDFs are crappily made and you can't select the freaking text completely, but it can be done. But even if this web page is supposed to be printed out, you then use a print.css and don't use all this junk I posted above for a "real" web page. You can't control people's screens or resolutions or browsers the way you know everyone's A4 page is the same (and even then, you can't control how wide they've set their printer margins).