...

View Full Version : table lines don't print



Bo Dill
03-02-2009, 05:01 PM
This is not a shopping cart problem, but I will use my shopping cart for an example. The pages are www.oldmanleather.com/managecart.html and /checkout.html. The javscripts that make the cart work are nopcart.js, and media.js.

The problem is that the pricing, shipping, and tax are figured and put in tables on the pages mentioned above. When I print the pages, the lines, or grid, in the tables do not print. I have seen this same problem when printing things like airline schedules, etc. The reason that I am concerned is that I want my customers to have the option of printing the checkout page and attaching check if they don't want to use a credit card.

In trying to figure this out my self, I found items like the one at http://search.cpan.org/~anio/HTML-EasyTable-0.04/lib/HTML/EasyTable.pm. This site has some sophisticated looking code (at least to me!). I am hoping that there is something relatively simple, like document.print, that I can understand, and apply to other tables as well.

P.S. The NOPCart free shopping cart has worked out well for me so far, and has demonstrated very good support in their forums. I am posting this here because it applies to more things than just the cart. My girlfriend and I have a few computers between us, and have found this printing problem at various times, and with more than one printer. I don't want my customers to need computer skills to print an order form, so I want to set up my site to do it for them.

Thank you very much for any help.

Bo

VIPStephan
03-02-2009, 05:16 PM
There is no reason to write advanced scripts to print a simple table. It is all done with a stylsheet (CSS) and you can (and should) have different stylesheets for different media types (http://alistapart.com/articles/goingtoprint/).

If I’m trying to print your shopping cart table and preview it then I see it the same as on the screen, i. e. with all separator lines etc. so I can’t reproduce the problem you’re having. However, things are all easier to fix if you have clean, semantic (http://boagworld.com/technology/semantic_code_what_why_how/), and valid HTML to work with and apply styles to.

Apostropartheid
03-02-2009, 05:37 PM
Setting the border for the data cells rather than the table solved it for me (FF3/Windows)

Bo Dill
03-02-2009, 05:56 PM
Thank you for your replies. I just went through a validation of the /checkout.html page, and was amazed at the number of errors I found (I used HOMESITE and PSpad for the validation). Other than that, I have to tell you that I'm still lost. Due to inexperience, I don't know how to set up different style sheets for different media, and I could not identify where to set the border for the data cells (is it on the checkout page, or in the javascript?).

I apologize for being so inexperienced, but I am a 63 old leathersmith, and I just want to make a nice site for my customers. Everything I have done so far has been a great effort on my part and, frankly, I'm getting headaches trying to learn all this stuff. I REALLY appreciate your help, and it would be especially helpful if you could direct me to some sample code for reference. I have purchase a pile of books, and I do search the internet for info before I post.

Thanks again,
Bo

Apostropartheid
03-02-2009, 06:11 PM
There are three ways of going about it. If you want two separate stylesheets, you can link to them in the HTML like this:


[...]
<link rel="stylesheet" type="text/css"
href="/styles/styles.css" media="screen"/>
<link rel="stylesheet" type="text/css"
href="/styles/print.css" media="print"/>
[...]
or if you want the print stylesheet to be based on the screen stylesheet, this:


[...]
<link rel="stylesheet" type="text/css"
href="/styles/styles.css" media="all"/>
<link rel="stylesheet" type="text/css"
href="/styles/print.css" media="print"/>
[...]
and using style blocks:


[...]
<style type="text/css" media="screen">
html {
font: .817em/1.8 'lucida grande', 'lucida sans unicode', sans-serif;
}
</style>
<style type="text/css" media="print">
html {
font: 11pt/1.6 georgia, serif;
}
</style>
[...]

If you want to use just the one stylesheet, you could use the @media rule.



@charset "utf-8";
@media screen {
html {
font: .817em/1.8 'lucida grande', 'lucida sans unicode', sans-serif;
}
}
@media print {
html {
font: 11pt/1.6 georgia, serif;
}
}

You may also want to look into the handheld media type, but for the functionality you want, it's not really required.

For a quick fix, stick this at the bottom of your stylesheet


@media print {
td {
border: 1px #000 solid;
border-collapse: collapse;
}
}

but I would recommend you take the time to learn this properly.

See also:
http://www.w3.org/TR/CSS2/syndata.html#at-rules
http://www.htmldog.com/guides/cssadvanced/atrules/
http://www.w3schools.com/CSS/css_mediatypes.asp

Bo Dill
03-02-2009, 06:56 PM
CyanLight,

Thank you very much for the help. I just want you to know that I have bought at least a dozen books on HTML, CSS, Javascript, and desk references, and I do read the tutorials at W3.org. Also, the checkout page was provided by the cart people, so i didn't expect to need validation. I try to validate my own code before I post anything. It is just that its all hard for me to understand, and after a year of this, I am getting worn out (see how simple my website is, and then imagine it took me a year to get this far). It will probably take me a couple weeks to figure out how to use the codes you gave me, but I wanted to thank you now.

So, thanks again,
Bo

VIPStephan
03-02-2009, 11:20 PM
Don’t worry, Bo, we’ll get this working. First, which browser is it in which you’re trying to print it? And are you able to modify the HTML of that shopping cart page?

Bo Dill
03-03-2009, 05:15 PM
VIPStephan and Cyanlight,

I cannot thank you enough for this kind attention. Last night, I started doing some serious validating on the cart pages that I mentioned in my post. After all this, the printing that I was trying to achieve started working when the PSPad (a free editor) validater found a <style> to be lacking a "type". When I added, type="text/javascript", to the code, it started printing all the lines.

By the way, the codes that CyanLight gave me are still going to go to good use. Its just that I work in my shop during the day, and have to do most of this website stuff at night. At times, like right now, I am checking e-mails, so I saw your latest response.

Thank you both again. Now I'm trying to figure out how to get the forms and tables to the center of the page. Right now, I am trying various placements of "margin:auto;" which my books tell me should do it. We'll see.................


Thanks again,
Bo

Apostropartheid
03-03-2009, 05:49 PM
It's text/css, by the way.

Bo Dill
03-03-2009, 05:49 PM
Sorry,

In my haste I wrote that the solution was adding text/javascript to a style. It was text/javascript to a script, and text/css to a style. I don't want to add to the confusion for someone else who might be following this.

Thanks again,

Bo Dill

Bo Dill
03-03-2009, 08:48 PM
CyanLight,

Looks like we crossed in the mail (look at the time stamps), but thank you again for your attention.

Bo

VIPStephan
03-04-2009, 12:25 PM
[Ö] the PSPad (a free editor) validater found a <style> to be lacking a "type". When I added, type="text/javascript", to the code, it started printing all the lines.

Yet another reason why we always wanna write clean and valid code. (just saying that for other potential visitors reading of this problem ;) ) Thereís also the W3C validator (http://validator.w3.org) where you can submit your pages and it checks for validity according to the official rules.

The first thing an HTML document should have is a doctype (http://alistapart.com/articles/doctype/) which I see you have added. Thatís very good and the first step towards a better website. :D THe rest comes as you work on it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum