6 Replies Latest reply on Sep 2, 2011 11:20 AM by Willam van Weelden

    Weirdness in WebHelp Styles

    JaredHess Level 1

      So, I just upgraded a few projects to RH 9. I'm noticing when I output to a WebHelp layout in RH 9, my styles differ from what's in the WYSIWYG editor as well as other layouts.

       

      For example, here's a topic in the WYSIWYG editor (apologies for the "large-ish" images--but I wanted to more easily display text size differences):

      9-1-2011 4-47-36 PM.jpg

       

      And here's the same topic inside the WebHelp browser (IE):

      9-1-2011 4-48-44 PM.jpg

       

      And just for kicks--as well as for comparison since I know HtmlHelp outputs use IE to display their content--here's the same topic inside a CHM output:

       

      9-1-2011 5-12-17 PM.jpg

       

      Notice that the CHM is correctly displaying while the WebHelp is not. In the WebHelp, the font size is slightly larger, and one of my headings isn't getting the reddish style.

       

      I've verified that the CSS file referenced is in the proper location on the server and contains the necessary styles.

      I've also checked the HTML view of the topic inside RH to see if there was any in-line formatting that might be messing this up, and the code looks good to me:

       

      ...
      <h4 class="BodyText">RAG Report</h4>
      <p class="BodyText">The RAG report is a variation on the Blanket Report.</p>
      <p class="Heading4B"><a class="dropspot" href="javascript:TextPopup(this)"
                               id="a2"><img src="i_blue_sm.jpg" alt="" style="border: none;"
                                               width="15" height="15" border="0" />
      Sample Report</a></p>
      <div class="droptext" id="POPUP465494784" style="display: none;">
          <p style="font-style: italic; font-weight: bold;"><img src="example_rag_report.jpg"
                                                                   alt="" style="border: none;"
                                                                   width="833"
                                                                   height="608"
                                                                   border="0" /></p>
      </div>
      <p class="heading4b">&#160;</p>
      <p class="heading4b">Description of Report</p>
      <p class="BodyText">This report is nearly identical to the Blanket Report,
      except that the transactions are shown as rows instead of columns. See
      the &quot;<a href="Blanket_Report.htm">Blanket Report</a>&quot; topic
      for information.</p>
      <ul type="square">
          <li class="p-BodyText"><p class="BodyText">Each row contains a transaction.</p></li>
          <li class="p-BodyText"><p class="BodyText">UWL stands for Upper Warning
           Limit.</p></li>
          <li class="p-BodyText"><p class="BodyText">LWL stands for Lower Warning
           Limit.</p></li>
      </ul>
      <p class="Heading4B">Creating a RAG Report:</p>
      <ol type="1">

      ...

       

       

      This seems to be a RH 9 bug, since that's the main thing that's changed with this project. Has anyone else seen this and do you know of any workarounds to get WebHelp to display properly?

        • 1. Re: Weirdness in WebHelp Styles
          Willam van Weelden Adobe Community Professional & MVP

          Hi,

           

          If I interpret the images correctly, your problem is that your numbered lists use the wrong font for numbering. Or am I missing out?

           

          For the font, there's an easy fix. Open your css in notepad and paste the following code into your css:

           

          ol { font-family: Arial, sans-serif; }

           

          Just change Arial into the name of the font you want to use. Just remember to put a font name between quotes if there is a space in the font name, such as "Courier New".

           

          Greet,

           

          Willam

          • 2. Re: Weirdness in WebHelp Styles
            Peter Grainge Adobe Community Professional (Moderator)

            Willam

             

            I think you are missing out, to use your words. Look at the relative size of the body text, also one of the headings is the wrong colour.

             


            See www.grainge.org for RoboHelp and Authoring tips

             

            @petergrainge

            • 3. Re: Weirdness in WebHelp Styles
              Willam van Weelden Adobe Community Professional & MVP

              Feeling very dumb right now

               

              Incorrect headings probably come from a case difference in the paragraph class name. Rename all class="heading4b" to class="Heading4B".

               

              Relative text size can have different reasons. First, check that your class names have the correct case. If that doesn't help, please post the css of the paragraph BodyText.

               

              Greet,

               

              Willam

              • 4. Re: Weirdness in WebHelp Styles
                JaredHess Level 1

                Thanks William. Below are the contents of my CSS file Pcdmis40.css.

                 

                ---

                /*Created with Adobe RoboHelp.*/
                /*Created with Adobe RoboHelp.*/
                /*Created with Adobe RoboHelp.*/
                /*Created with Adobe RoboHelp.*/
                /*Created with Adobe RoboHelp.*/
                /*Created with Adobe RoboHelp.*/
                /*Created with Adobe RoboHelp.*/
                /*Created with Adobe RoboHelp.*/
                /*Created with Adobe RoboHelp.*/
                /*Created with Adobe RoboHelp.*/
                BODY {
                    background-color: #ffffff;
                }
                P {
                    font-family: Arial;
                    font-size: 12.0pt;
                    color: #000000;
                }
                LI.P {
                    font-family: Arial;
                    font-size: 12.0pt;
                    color: #000000;
                }

                H1 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 16.0pt;
                    color: #000080;
                }
                LI.H1 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 16.0pt;
                    color: #000080;
                }

                H2 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 14.0pt;
                    color: #000080;
                }
                LI.H2 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 14.0pt;
                    color: #000080;
                }

                H3 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 12.0pt;
                    color: #000080;
                }
                LI.H3 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 12.0pt;
                    color: #000080;
                }

                H4 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 12.0pt;
                    color: #000080;
                }
                LI.H4 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 12.0pt;
                    color: #000080;
                }

                H5 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 12.0pt;
                }
                LI.H5 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 12.0pt;
                }

                H6 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 12.0pt;
                }
                LI.H6 {
                    font-family: Arial;
                    font-weight: bold;
                    font-size: 12.0pt;
                }

                A:link {
                    color: #0000ff;
                    text-decoration: underline;
                }
                A:visited {
                    color: #0000ff;
                    text-decoration: underline;
                }
                A.expandspot {
                    cursor: hand;
                    font-style: italic;
                    color: #0000ff;
                    text-decoration: none;
                }
                SPAN.expandtext {
                    font-style: italic;
                    font-weight: normal;
                    x-condition: Print;
                }
                A.dropspot {
                    cursor: hand;
                    font-style: italic;
                    color: #0000ff;
                    text-decoration: none;
                }
                A.glossterm {
                    color: #800000;
                    cursor: hand;
                    font-style: italic;
                    text-decoration: none;
                }
                SPAN.glosstext {
                    font-style: italic;
                    font-weight: normal;
                    color: #0000ff;
                }
                OL,
                UL {
                    margin-top: 0px;
                    margin-bottom: 0px;
                }
                P.List {
                    text-indent: -0in;
                    margin-left: 18pt;
                    font-size: 10pt;
                }
                LI.P-List {
                    text-indent: -0in;
                    font-size: 10pt;
                }

                P.Caption {
                    font-size: 10pt;
                    font-style: italic;
                    font-weight: normal;
                    margin-top: 0pt;
                }
                LI.P-Caption {
                    font-size: 10pt;
                    font-style: italic;
                    font-weight: normal;
                }

                P.MARGINNOTE {
                    font-size: 10pt;
                    font-style: italic;
                    font-weight: normal;
                    color: #0000ff;
                }
                LI.P-MARGINNOTE {
                    font-size: 10pt;
                    font-style: italic;
                    font-weight: normal;
                    color: #0000ff;
                }

                P.Note {
                    color: #0000ff;
                    border-left-style: Solid;
                    border-right-style: Solid;
                    border-top-style: Solid;
                    border-bottom-style: Solid;
                    font-size: 10pt;
                    background-color: #eeeeee;
                    border-left-width: 1px;
                    border-right-width: 1px;
                    border-top-width: 1px;
                    border-bottom-width: 1px;
                    border-left-color: #800000;
                    border-right-color: #800000;
                    border-top-color: #800000;
                    border-bottom-color: #800000;
                }
                LI.P-Note {
                    color: #0000ff;
                    font-size: 10pt;
                }

                P.List2 {
                    margin-left: 36pt;
                    font-size: 10pt;
                }
                LI.P-List2 {
                    font-size: 10pt;
                }

                A:hover {
                    color: #800000;
                }
                P.Note2 {
                    border-left-style: Solid;
                    border-right-style: Solid;
                    border-top-style: Solid;
                    border-bottom-style: Solid;
                    border-left-width: 1px;
                    border-right-width: 1px;
                    border-top-width: 1px;
                    border-bottom-width: 1px;
                    background-color: #c0c0c0;
                    font-weight: bold;
                    font-style: normal;
                    color: #0000ff;
                    font-size: 10pt;
                }
                LI.P-Note2 {
                    font-weight: bold;
                    font-style: normal;
                    color: #0000ff;
                    font-size: 10pt;
                }

                P.MoreHeading {
                    font-weight: bold;
                    font-style: normal;
                    color: #000080;
                    margin-bottom: 0pt;
                }
                LI.P-MoreHeading {
                    font-weight: bold;
                    font-style: normal;
                    color: #000080;
                }

                P.BODYTEXT {
                    margin-top: 0pt;
                    font-family: Arial;
                    font-size: 10pt;
                    font-style: normal;
                    font-weight: normal;
                }
                LI.P-BODYTEXT {
                    font-family: Arial;
                    font-size: 10pt;
                    font-style: normal;
                    font-weight: normal;
                }

                p.MORELIST {
                    font-family: Arial;
                    color: #000000;
                    margin-top: 5pt;
                    margin-bottom: 5pt;
                    font-size: 10pt;
                }
                LI.p-MORELIST {
                    font-family: Arial;
                    color: #000000;
                    font-size: 10pt;
                }

                P.Heading4B {
                    font-weight: bold;
                    font-style: normal;
                    color: #800040;
                    font-size: 10pt;
                    margin-bottom: 3pt;
                }
                LI.P-Heading4B {
                    font-weight: bold;
                    font-style: normal;
                    color: #800040;
                    font-size: 10pt;
                }

                P.PcdmisExtension {
                    font-size: 10pt;
                    font-weight: bold;
                    font-style: italic;
                    color: #0000a0;
                }
                LI.P-PcdmisExtension {
                    font-size: 10pt;
                    font-weight: bold;
                    font-style: italic;
                    color: #0000a0;
                }

                p.CODE {
                    font-size: 8pt;
                    font-family: "Courier New", monospace;
                    color: #000080;
                    margin-top: 5pt;
                    margin-bottom: 5pt;
                }
                LI.p-CODE {
                    font-size: 8pt;
                    font-family: "Courier New", monospace;
                    color: #000080;
                }

                p.TABLEHEADING {
                    font-weight: bold;
                    font-style: normal;
                    background-color: Transparent;
                    font-size: 10pt;
                    color: #008080;
                }
                LI.p-TABLEHEADING {
                    font-weight: bold;
                    font-style: normal;
                    font-size: 10pt;
                    color: #008080;
                }

                P.tabletext {
                    font-size: 10pt;
                    font-weight: normal;
                    font-style: normal;
                    background-color: Transparent;
                    margin-top: 0pt;
                }
                LI.P-tabletext {
                    font-size: 10pt;
                    font-weight: normal;
                    font-style: normal;
                }

                p.figure {
                    font-family: Arial;
                    font-size: 12.0pt;
                    color: #000000;
                    margin-bottom: 0pt;
                    margin-top: 3pt;
                }
                LI.p-figure {
                    font-family: Arial;
                    font-size: 12.0pt;
                    color: #000000;
                }

                SPAN.CODECharacter {
                    font-family: "Courier New", monospace;
                    background-color: Transparent;
                    color: #000080;
                    font-size: 8pt;
                }
                P.nolinespace {
                    margin-top: 0pt;
                    margin-bottom: 0pt;
                    font-size: 10pt;
                }
                LI.P-nolinespace {
                    font-size: 10pt;
                }

                P.Warning {
                    border-left-style: Solid;
                    border-right-style: Solid;
                    border-top-style: Solid;
                    border-bottom-style: Solid;
                    font-size: 10pt;
                    background-color: #eeeeee;
                    border-left-width: 1px;
                    border-right-width: 1px;
                    border-top-width: 1px;
                    border-bottom-width: 1px;
                    border-left-color: #800000;
                    border-right-color: #800000;
                    border-top-color: #800000;
                    border-bottom-color: #800000;
                    color: #ff0000;
                }
                LI.P-Warning {
                    font-size: 10pt;
                    color: #ff0000;
                }

                P.SmallBlueHeading {
                    font-size: 8pt;
                    font-weight: bold;
                    font-style: normal;
                    color: #0000a0;
                    margin-bottom: 0pt;
                }
                LI.P-SmallBlueHeading {
                    font-size: 8pt;
                    font-weight: bold;
                    font-style: normal;
                    color: #0000a0;
                }

                LI.p-bodytxt {
                    font-family: Arial;
                    font-size: 12.0pt;
                    color: #000000;
                }

                 

                ---

                 

                So it sounds like you're saying the CSS file case has to match what's in the htm file. From my tests, that seems to be the case. I'm guessing when the project was converted to RH 9 and the innards of each .htm file were updated to xhtml format that some of the style references in the htms were automatically changed to lowercase--or something, though why only some were changed and some were not, I don't know.

                 

                For example, I see these two references:

                <p class="heading4b">Description of Report</p>

                <p class="Heading4B">Creating a RAG Report:</p>

                 

                Or maybe nothing was changed and this is just a case of stricter code in xhtml? 

                 

                Hmmm. Well, at least I know the culprit, so thanks to you for that.

                 

                Now I just need to figure out how to fix it gracefully. I guess some multi-file Find and Replace operations across my projects are in order. I'm sure my copy of Notepad++ will feel well used.

                • 5. Re: Weirdness in WebHelp Styles
                  Willam van Weelden Adobe Community Professional & MVP

                  Hi,

                   

                  Your problems seem to be the case of your class names. With a few simple find and replace operations, you can change your project so it will work ok. The same problem with your p.BodyText.

                   

                  CSS: p.BODYTEXT

                  HTML: <p class="BodyText">

                   

                  Nothing changed in the class names of your HTML. XHTML forces the browser to render in the standards compliant mode. CSS selecters are case sensitive and in strict mode your styles don't apply to your HTML. CHM still uses the HTML 4.01 rendering so it still looks good there.

                   

                  Greet,

                   

                  Willam

                  • 6. Re: Weirdness in WebHelp Styles
                    JaredHess Level 1

                    Ok. Thanks for your help Willam.