7 Replies Latest reply on Mar 17, 2010 1:03 AM by Willam van Weelden

    CSS rendering problem with non-CHM output

    TWRob Level 1

      Hi,

       

      Does RH8 do something to Web output (WebHelp, WebHelp Pro, FlashHelp Pro, AIR) differently than did RH7? Differently, apart from the obvious, than CHM output?

       

       

      I upgraded to RH8 from RH7 a litte more than a month ago with seemingly no major issue. The projects I work on require CHM output, which I've successfully completed, as in the past, without issue. Most of the projects, however, also need a Web-based version of their documentation. I entertained the idea of using AIR, but some of my CSS styles did not render correctly. Then I tried WebHelp, which I previously used with RH6 & 7, but the same CSS-related style problems occurred. 

       

       

      I have tested to establish that it affects only a few of my styles: one to specify a caption font, one to have a containing div that allows me to move different text divs relative to associated images (for warnings, information, and tips), but the problem does not occur consistently across the document although it seems to be the same each time it is generated. Yet, nothing in the markup seems different from one that works to one that doesn’t. Also – oddly – all (I think) my anchors behave as if they have a link style attached to them.

       

       

      Any insights would be highly appreciated.

       

       

        • 1. Re: CSS rendering problem with non-CHM output
          Willam van Weelden Adobe Community Professional & MVP

          Hi,

           

          I found that RH8 does less to your style sheets than RH7. (The  _ns css has disappeared for one )

          RH has moved from HTML 4.01 to XHTML 1.0 transitional. This greatly affects the way that Internet Explorer renders your help. What happens if you view your RH7 WebHelp output in Firefox?

           

          You say that the problem is not consistent, which suggests that there is some other style that overwrites your css. This can be another css, a style block or inline styling. (As I don't know what changes, this can be on the correct or the incorrect pages.)

           

          About your anchors. You probably have the syntax incorrect: <h1><a name="top">Heading</a></h1>

          The correct syntax is: <h1><a name="top"></a>Heading</h1>

          The styling as a link is now correct.  Because IE sucks, it rendered it differently in RH7 output (Firefox rendered correct).

           

          If you need some more help, please post an example topic, your css and description of your styling problems.

           

          Greet,

           

          Willam

          1 person found this helpful
          • 2. Re: CSS rendering problem with non-CHM output
            TWRob Level 1

            Hi,

             

            Thanks for the reply. You are correct about Firefox vs. IE for the RH7 webhelp, thus the mysterious styles applied to the anchors are no longer a mystery.

             

            As for the more important elements, will the following be adequate?

            ________________________________________________________________________

            The following samples are from a problem WH version where the problem does not occur:

            S1.

            <div class="container"><div>

            <p><img src="../../../../../image/info_small.png" style="border: none;" alt="info_small.png" width="800" height="69" border="0" /></p>

            </div>

            <div class="InfoBoxText" style="x-right: 9px; x-bottom: 7px;">Anytime you press the Enter Key, or any of the other keys while writing script, a temporary dialog box appears with a list of options that you can choose from. Once you have made a selection, the option box disappears.</div>

            </div>

             

            S1.b

            <p class="caption"><span lang="EN-US" xml:lang="EN-US">Figure 1: Scriptwriting panel</span></p>

            ________________________

            The following samples are from the same problem WH version, but where the problem does occur:

             

            S2.

            <div class="container">

            <div><p><img src="../../../../../image/info_small.png" style="border: none;" alt="info_small.png" width="800" height="69" border="0" /></p></div>

            <div class="InfoBoxText" style="x-right: 308px; x-bottom: 642px;">You can add or delete Smart Types at any time by clicking the <span class="UIfeature">New</span> or <span class="UIfeature">Delete</span> buttons located just below the main view window.</div>

            </div>

             

            S2.b

            <p class="Caption">Figure 2: Scriptwriter General</p> 

             

            ________________________

            The following samples are the same problem markup regions as S2, but this time drawn from WH RH7 (no problem):

             

            S3.

            <div class=container>

            <div class="whs25">

            <p><img src="../../../../../image/info_small.png" x-maintain-ratio="TRUE" width="800px" height="69px" border="0" class="img_whs43"></p>

            </div>

            <div class=InfoBoxText style="x-right: 308px; x-bottom: 642px;">

            You can add or delete Smart Types at any time by clicking the <span class=UIfeature>New</span>

            or <span class=UIfeature>Delete</span> buttons located just below the

            main view window.

            </div>

            </div>

             

            S3.b

            <p class=Caption>Figure 2: Scriptwriter General</p>

             

            ________________________

            S4. The following are the same problem markup regions as S2, but this time drawn from the RH8 CHM (no problem):

            <div class="container"><div>

            <p><img src="../../../../../image/info_small.png" alt="" width="800" height="69" border="0" class="hcp8"></p>

            </div>

            <div class="InfoBoxText" style="x-right: 308px; x-bottom: 642px;">You can add or delete Smart Types at any time by clicking the <span class="UIfeature">New</span> or <span class="UIfeature">Delete</span> buttons located just below the main view window.</div>

            </div>

             

            S4.b

            <p class="Caption">Figure 2: Scriptwriter General</p>

            _____________________________________________________________

             

            It's difficult for me to share anything straight with you as all the work I do is company confidential, but I hope the above will be addequate to ascertain why I have such different results. I can't send images - security - but the end results of the bad ones are the caption font appears as normal font and  the InfoBoxText, which has settings to move it relative to the image, ends up relative to the top of my page.

             

             

            IF you need more, I'll see what i can do.

            • 3. Re: CSS rendering problem with non-CHM output
              Willam van Weelden Adobe Community Professional & MVP

              Hi,

               

              I don't see anything obvious. Can you share your style sheet? At least the styles for div.container, div, p, p.caption, div p, p img, etc

               

              Greet,

               

              Willam

               

              This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

              • 4. Re: CSS rendering problem with non-CHM output
                TWRob Level 1

                Hi,

                 

                Here, drawn directly from the CSS, are the styles in question:

                P {

                            font-size: 11.0pt;

                            margin-top: 0pt;

                            margin-bottom: 0pt;

                            font-family: "times new-roman", serif;

                            text-decoration: none;

                }

                P.caption {

                            x-next-class: ;

                            x-next-type: P;

                            font-size: 8pt;

                            font-weight: bold;

                            font-style: normal;

                            font-family: Verdana, sans-serif;

                }

                 

                div.Container {

                            position: relative;

                }

                 

                div.InfoBoxText {

                            position: absolute;

                            left: 75px;

                            top: 1px;

                            font-weight: bold;

                            font-style: italic;

                            font-size: 12px;

                            vertical-align: top;

                            margin: 10px;

                            font-family: Tahoma, sans-serif;

                            text-align: left;

                            align: left;

                            width: 701px;

                }

                I do not have a style for img or for a div without a specific class.

                 

                What throws me off is the inconsistency with which things are rendered. If every instance of the style were to be rendered a particular way, I would assume a problem with the CSS. Since that's not the case, I assumed a problem with the markup that I showed you earlier...but, like me, you didn't see anything obvious.

                • 5. Re: CSS rendering problem with non-CHM output
                  Willam van Weelden Adobe Community Professional & MVP

                  Hi,

                   

                  The incorrect positioning of InfoBoxText is likely caused by the wrong position. It has position:absolute defined, but I think you need position:relative. Position:absolute positions the element absolute within its parent element (ie 1px from the top of the body) whilst position:relative positions it relative to the position it has in the regular 'flow' of the page.

                   

                  The caption font is rendered incorrectly because the css is lowercase, whilst the first letter in your html in uppercase. CSS is case sensitive. The easiest way of fixing this, is adding P.Caption to your css, like this:

                   

                  P.caption, P.Caption {}

                   

                  Hope this helps,

                   

                  Greet,

                   

                  Willam

                   

                  This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

                  1 person found this helpful
                  • 6. Re: CSS rendering problem with non-CHM output
                    TWRob Level 1

                    Thanks for your insight William; although, your second suggestion did not quite work for me, the first one was able to fix both issues!

                     

                    It appears that some of my styles changed their case within the HTML. After running a couple of SED commands to make sure all the referenced styles had the right case, everything worked as it should. :-)

                     

                    However, since I consistently use the Apply Style drop-down in Robohelp for applying my CSS, the reason for which the case ever changed remains a mystery to me. If you have further info on that, bonus, but my problem has been resolved. Thank you.

                    • 7. Re: CSS rendering problem with non-CHM output
                      Willam van Weelden Adobe Community Professional & MVP

                      I have no idea why RoboHelp would change the case of the styles. At least your problem is resolved.

                       

                      Greet,

                       

                      Willam

                       

                      This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.