Thank you Stephan and Richard for taking the time to make some comments regarding CSS for rendering
the print version of online forms...
I played around with my print stylesheet taking your suggestions
into consideration (see my original message below for all relevant links). My ultimate goal was to
have the checkbox sections line up in two columns when printed (like they do on screen), but in the
end I couldn't get it to do that...
But good news! I did get them to neatly line up
together in a single column (which is a good alternative to two columns because the important issue
for me to keep in mind is that the person reading the form will be able to tell
which checkbox goes with which label).
In case you are interested... here is what I did in the print.css stylesheet:
I made the <div> for the checkbox section larger than it is for display on the
screen. Then I made sure the label had no left hand margin. And I took your suggestion, Richard, and
input.checkbox's width auto (and made the right margin .25 em).
This renders the checkboxes in a even single column list for printing. Its not perfect, but I am not
a webmaster nor a css designer by profession, so this was very a very helpful solution for me.
Than you again,
> From: [EMAIL-REMOVED]
> To: [EMAIL-REMOVED]
> Date: Fri, 1 Feb 2008 14:57:40 -0500
> Subject: [css-d] printing online forms
> Hello --
> I'm the webmaster for a regional archives organization who have asked me to update an online
member application form.
> They do not want members to email the form to them, but rather fill in the form online, print it
out, and mail it in. I know this could be accomplished very easily with a PDF form, but I think the
idea is to be as user-friendly (and accessible) as possible, so we've tried to limit the number of
PDFs on the site...
> So... since I am in the process of teaching myself tableless design with CSS and thought I'd start
here. I built the form with CSS (with many thanks to "CSS Mastery" by Andy Budd), but now I need it
to print properly.
> I've created a print stylesheet and now the biggest issue I'm having is getting the checkbox
columns to work in the print-out. They look great on the screen and they print really awful... I'm
trying so hard to make this work, but I'm not exactly sure what I am doing wrong.
> Here is the online form:
> Here is the form stylesheet:
> Here is the print stylesheet:
> Any suggestions or resources you could point me to?
> Jessica Tanny
> Shed those extra pounds with MSN and The Biggest Loser!
> css-discuss [EMAIL-REMOVED]]
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Need to know the score, the latest news, or you need your Hotmail®-get your "fix".
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/