16 replies [Last post]
tmt1630
tmt1630's picture
Offline
Regular
Rochester, NY
Last seen: 11 years 51 weeks ago
Rochester, NY
Joined: 2007-03-24
Posts: 14
Points: 0

Hi,

I'm a newbie to CSS. I picked up a CSS book a few months ago and tried create the page below using Dreamweaver. I nearly pulled all the hair out of my head before I came to realize that Dreamweaver and CSS do not work well together. This was also recently affirmed in a recent post on this site! At any rate, I eventually came across CSS Creator and the CSS Generator Tool....so I used it to create the page below and it worked beautifully (across multiple browers too: IE7, NS7.1, Opera 9). Many thanks for that!

Here's my problem: I want to print this page on a all-white background, minus the header/buttons/image, and with a border around the left column, main column and footer area. Most of this is good except the border between the left and main columns. Placing it in leftcol or maincol causes the leftcol to either disappear or end up elsewhere on the printed page. Any thoughts about how to make this happen?

The page: http://www.womantours.com/csscreator2.html
The CSS: http://www.womantours.com/csscreator2.css

Thanks for your time!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Now your not thinking in

Now your not thinking in terms of web browser display but in terms of layout design for print medium, the first thing I would do is convert to absolute dimensions expressed in inches/cm fonts/borders in pt/pc etc.

Design your layout to fit exactly the dimensions of a sheet of A4.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tmt1630
tmt1630's picture
Offline
Regular
Rochester, NY
Last seen: 11 years 51 weeks ago
Rochester, NY
Joined: 2007-03-24
Posts: 14
Points: 0

pt/pc?

Thanks for the help Hugo...I'll look into it. BTW...what is pt/pc?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

tmt1630 wrote:Thanks for the

tmt1630 wrote:
Thanks for the help Hugo...I'll look into it. BTW...what is pt/pc?

Methinks a typo (of the type that are strewn all across my posts Smile )

The c is next to the x on the keyboard, so read it as pt/px (points/pixels)

CT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

no no pt/pc (points/picas)

no no pt/pc (points/picas) no pixels in printer

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tmt1630
tmt1630's picture
Offline
Regular
Rochester, NY
Last seen: 11 years 51 weeks ago
Rochester, NY
Joined: 2007-03-24
Posts: 14
Points: 0

Ahhh....points/pixels!

Hugo had me second-guessing my understanding of CSS. pt/pc? What the $*@&! is that?!? Smile pt/px makes complete sense! Appreciate the clarification.

tmt1630
tmt1630's picture
Offline
Regular
Rochester, NY
Last seen: 11 years 51 weeks ago
Rochester, NY
Joined: 2007-03-24
Posts: 14
Points: 0

You're killing me

OK, OK...points/picas! Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Picas Slaps head. Forgotten

Picas

Slaps head. Forgotten about them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

all I can remember is they

all I can remember is they bigger than pt Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 8 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

A pica is 12 pt., ? inch,

A pica is 12 pt., ⅙ inch, or about 16 px at normal screen resolutions.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Oh golly, this could go on

Oh golly, this could go on ...

http://typophile.com/node/29989

The microsoft link is quite edifying.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

kk5st wrote:A pica is 12

kk5st wrote:
A pica is 12 pt., ⅙ inch, or about 16 px at normal screen resolutions.

cheers,

gary

Oh, I kneeew that gary :rolleyes:

lets not get started on typography, I've found so many arcane sites dealing with typograhy in general and web typography in particular that are fascinating, love that sort of stuff I'm the web equivelent of a trainspotter.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tmt1630
tmt1630's picture
Offline
Regular
Rochester, NY
Last seen: 11 years 51 weeks ago
Rochester, NY
Joined: 2007-03-24
Posts: 14
Points: 0

I've learned more about

I've learned more about picas than I wanted to! Smile I'm going to go off and work with my points/picas now. I'll let you know how it turns out.

Enjoyed the picas banter!

tmt1630
tmt1630's picture
Offline
Regular
Rochester, NY
Last seen: 11 years 51 weeks ago
Rochester, NY
Joined: 2007-03-24
Posts: 14
Points: 0

Follow-up---it's better, but not quite there yet.

I've converted to absolute dimensions and designed around a A4 page as suggested by Hugo in the second post (at least I think I've done that!). The results of the print preview in IE7.0 is nice. The the results of print preview in FF 2.0.0.3 shows the right column being cut off. I've monkeyed around with margins, but it consistently cuts the right column off. This happens in NS7.1 and Opera 9 too.

A slimmed down example of the problem can be found here:

The HTML: http://www.womantours.com/csscreator4-lite.html
The CSS: http://www.womantours.com/csscreator4-lite.css

Any thoughts on why this happens?

Thanks!!

tmt1630
tmt1630's picture
Offline
Regular
Rochester, NY
Last seen: 11 years 51 weeks ago
Rochester, NY
Joined: 2007-03-24
Posts: 14
Points: 0

Issue resolved

Hi Folks...you can mark this problem solved. I understand why there were no responses to my previous post...it's been well documented in the past! Since that time, I've been able to satisfactorily format a print version that works well all the browsers I've tested. I have a separate issue though, but I'll start that in another thread.

Thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Apologies actually missed

Apologies actually missed the fact that you had posted anew to the thread.

So what was the problem? the absolute positioning of the main column?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tmt1630
tmt1630's picture
Offline
Regular
Rochester, NY
Last seen: 11 years 51 weeks ago
Rochester, NY
Joined: 2007-03-24
Posts: 14
Points: 0

It really came down to

It really came down to getting the columns the right size. If they were too big, the paper margin cut them off. It took a bunch of trial-n-error...but I got it there.