Extremely strange formatting when printing HTML (long)

["Chuck Martin" <cm -at- writeforyou -dot- com>]

I just encountered some strange formatting occurrances that my manager asked
me to fix. Here's the situation.

I'm updating (putting it mildly) a web-based Help ssytem for a web
application. The tool of choice at the company, where I just started and
where I have 2 months to update the user and admin guides (several hundred
topics each) is RoboHelp 2000, using the RoboHTML part of the tool. (I know,
I know, don't go there). I've installed Dreamweaver (MX) to do the actual
editing work.

I've ruthlessly excised both bloated content (the previous content was
written by a merketing person) and bad tool tagging, leaving the plainest
HTML with a style sheet atttached.

I'm getting some funky spacing when printing. The best way to describe it is
that in all the items in a numbered list have a few characters at the
beginning of each list item moved to the left. I'm going to try and
illustrate.

A normal numbered list should look like this (the spacing will look better
if you receive this as plain text and read it with a monospaced font):

1.  This is step 1.
2.  This is step 2.
3.  This is step 3.
4.  This is step 4.

What's happening is that it's getting printed like this:

1.Th  is is step 1.
2.Th  is is step 2.
3.This is st  ep 3.
4.Th  is is step 4.

Even more strange, this happens only with numbered steps, not in bulleted
lists (both of which use the LI tag.

This happens whether I print out directly from RoboHTML from just printing
the file from opening it directly in my default browser, IE6 (6.00.2800.1106
with WinXP SP2), or from prining it from the resulting Help system. (All of
which, of course, use the same IE browser.) My boss gets the same thing when
he prints on his machine (IE also).

This does not happen when I print from Mozilla 1.4 (although the text
appears larger, but that's another issue).

I ran a test. I stripped out all the JavaScript from the file. Still the
same problem. I stripped down the CSS file to the essentials (taking out all
the unnecessary RH tags). Still the same problem. I finally tried without
the CSS attached. Bingo, it printed fine (although using the browser default
fonts, which are too large for a Help system).

Here's a copy of the contents of the test CSS file:

 BODY { font-family : "Verdana", "Arial";
        font-size : 9pt;
        background-color : white;}

 H1 {
 font-family : "Arial", "Helvetica", "Monaco";
 font-weight : bold;
 font-size : 12.0pt;
 color : #1B4C8F;
 background-color: #FFFFCC;
 border-top: thin solid #FFFFCC;
 border-right: medium solid #FFFFCC;
 border-bottom: thin solid #FFFFCC;
 border-left: medium solid #FFFFCC;



}

 H2 { font-family : "Arial", "Helvetica", "Monaco";
      font-weight : bold;
      font-size : 10.0pt;
      text-align : left;
      color : #1B4C8F;
      margin-bottom : -5.0pt;}

 H3 {
 font-family : "Arial", "Helvetica", "Monaco";
 font-size : 9.0pt;
 color : #1B4C8F;
 margin: auto;
}

 H4 { font-family : "Verdana", "Arial";
      font-style : normal;
      font-variant : normal;
      font-weight : bold;
      font-size : 9pt;
      text-transform : none;
      margin-bottom : -5.0pt;}

 A:link { font-family : "Verdana", "Arial";
          font-weight : normal;
          text-decoration :underline;
          color : #0000D0;}
 A:visited { font-family : "Verdana", "Arial";
             font-weight : normal;
             text-decoration :underline;
             color : #0000D0;}
 P { font-family : "Verdana", "Arial";
    font-size : 9.0pt;}

 A:active { font-weight : bold;
            color : #0000D0;}
 P.note { font-family : "Verdana", "Arial";
          font-size : 8.0pt;
          background-color : #CCFFFF;
          text-align : left;
          color : #1B4C8F;
          border : solid #CCFFFF 4.0pt;
          line-height : normal;
          margin-right : 6.0pt;}
 .note { font-family : "Verdana", "Arial";
          font-size : 8.0pt;
          background-color : #CCFFFF;
          text-align : left;
          color : #1B4C8F;
          margin-right : 6.0pt;}

 CODE { font-family : "Courier New", Courier, mono;
        font-weight : normal;
        font-size : 9pt;
        color : black;}

 H5 { font-family : "Verdana", "Arial";
      font-weight : bold;
      font-size : 8.0pt;
      color : #1B4C8F;
      margin-bottom : -5.0pt;}

dt {
 font-weight: bold;
}
td {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9pt;
}
table {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9pt;
}
tr {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9pt;
}


You'll note that there are no styles defined for any of the list tags (OL,
UL, or LI).

If I had to hazard a guess, I'd say that there is something with IE's
implementation of CSS where some attribute in some other tag is causing this
quirk in the first-level LI tags that are within the UL tags. But this is
only a guess, and am not sure how to proceed.

Any guesses?

thx,
Chuck Martin