Trouble with CSS for print 1

[duph]

Hi everyone,

I have a form that I've used in the past to have visitors send letters via eFax to elected officials. I am trying to adapt it to also enable users to print the letter in a neat-looking format. Users enter their contact information and have the option to edit a textarea (the letter), then using a print stylesheet I format that information into the letter they can print off.

URL:

http://www.trafficrelief.org/test.html

Here's my print stylesheet:

.exclude {display:none;}

label {display: none;}

input, textarea, .print{
	border:0;
	font: normal 11pt "Times New Roman", Arial, sans-serif;}

textarea {
	border:0;
	font: normal 11pt "Times New Roman", Arial, sans-serif;
	overflow:visible;
	width:6.70in;
	height:100%;}

#E-mail input {display:none;}

#contact {line-height:1em;
	position:absolute;
	top:50px;}

#City {width:50px;
	overflow:visible;}

#State {width:5px;
	overflow:visible;}

#subject {font-weight:bold;}

#letter {position:absolute;
	top:50px;}

#Submitted_by {position:absolute;
	top:800px;}

I have the beginnings of a nice letter for print (try it out in IE to get the idea of what I'm trying for), but 2 major snags:

1. Firefox on both mac and pc refuses to show the entire textarea and mashes together the address information the user enters.
2. Safari is all over the map - shows input borders, text size is different. Wow I guess it's back to the drawing board for that one.

For now any help someone could offer about the Firefox problems would be GREATLY appreciated.

THANKS!

 

[Vragabond]

1. Have you tried removing the 100% height from the textarea declaration?

2. Safari has very limited styling options for form elements. This is something you'll just need to live with. See here for more details:

http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/

 

[duph]

Took the 100% height off the textarea but it still gets cut off.. ?

Geez, and here I had such a high opinion of Safari. Really no way around for Safari users? This print capability is basically unusable for them at this point.

I have decided to simplify and eliminate the address info at the top of the letter, so that's not an issue anymore.

 

[duph]

Got it to work by specifying a large height for the textarea in inches. A finicky situation after all...

textarea {
	border:0;
	font: normal 11pt "Times New Roman", Arial, sans-serif;
	overflow:visible;
	width:6.70in;
	height:8.5in;}

Thanks for your help Vragabond.