firespring wrote
> If you want to eliminate printing problems, START by
> eliminating any unit
> of measure other than pixels (px) from your pages. Use of em,
> pt, cm, in,
> and all the rest are known to cause printing problems. See
> http://www.richinstyle.com/ for more info.

in response to Susan Murray-Smith, who wrote
> > I have just started some page development using CSS
> positioning for layout. What I wanted
> > was a left hand menu, without using a table.
> >
> > I've used a model based on one of the tutorials (no. 19)
> from HTML with Style, by
> > Stephanos Piperoglou, on webreference.com
> >
> > http://webreference.com/html/tutorials/
> >
> > Basically you use a DIV with relative positioning to
> encompass the main section of the
> > page, and build 2 DIVs within the major one. The MAIN DIV
> has a wide left margin,
> > and the MENU DIV sits within this margin space.

I read this interesting workaround a while back, and avoided
the technique as a more complicated solution than necessary.  I
strongly disagree with using absolute units of measure,
especially px, on many grounds.  Absolute units are an
accessibility issue, page authors have no idea the size of my
pixels, and the definition of pixel has changed
(http://www.w3.org/TR/REC-CSS2/syndata.html#x39)and when UAs
catch up, pages carefully laid out by pixel are likely to
break.  So what to do?  The compromise I use is covered by the
Accessibility Guidelines, and being simpler than Mr.
Piperoglou's solution, should be easier to coerce into
something printable from both browsers, and even legacy
browsers do well with the technique.

When NN4 compatibility is needed, I do one of two things: use a
table of one column to lay out vertical navigation bars and
float the table left or right, or use a horizontal navigation
bar styled vertically for IE4+ only.  When using a table, it
makes sense when linearlized and so is not an immediate
accessibility problem.  The rest of the page flows around the
table nicely, though you have the option to constrain the rest
of the content in a div to prevent this.

When using a DIV styled to be vertical, such a bar is rendered
horizontally in non-CSS compliant browsers, and vertically in
CSS browsers.  It is impossible to get them to look absolutely
identical, so why waste time trying?  It still works and can be
made attractive (though somewhat different) in both.  Keep in
mind few people will see your pages in both browsers, and most
will not know there is a difference.

I also tend to use
@media print {.yournavbarclassname {display:none;} }
to suppress navigation (and other unneeded elements as well)
from the printed page.  I put samples of these on my web site.
Please check them out in every browser you can; I'd like to fix
them if needed.  They look and print fine at any reasonable
user font size (though unexciting; they have minimal styling)
in IE 5, NN 4.7, and Amaya 2.4.  Note these may need a minor
adjustment for IE4.  I hope this helps.  -David

The demo:
http://waggy.org/demo/navdiv.html

<blockquote>
<cite>
Web Content Accessibility Guidelines, Techniques for WCAG
http://www.w3.org/TR/WAI-WEBCONTENT/
</cite>
5.3 Do not use tables for layout unless the table makes sense when
linearized. Otherwise, if the table does not make sense, provide an
alternative equivalent (which may be a linearized version). [Priority 2]
Note. Once user agents support style sheet positioning, tables should not be
used for layout.

3.4 Use relative rather than absolute units in markup language attribute
values and style sheet property values. [Priority 2]
For example, in CSS, use 'em' or percentage lengths rather than 'pt' or
'cm', which are absolute units. If absolute units are used, validate that
the rendered content is usable (refer to the section on validation).

5.1 Guidelines for creating style sheets
...
- Only use absolute length units when the physical characteristics of the
output medium are known.
</blockquote>

• Web Designer Courses
• Off the Shelf Training Courses

HWG hwg-style mailing list archives, maintained by Webmasters @ IWA