Skip to main content
A
Anonymous
March 11, 2010
Question

CSS rendering problem with non-CHM output

  • March 11, 2010
  • 1 reply
  • 1234 views

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.

This topic has been closed for replies.

1 reply

Willam van Weelden
Willam van Weelden
Inspiring
March 12, 2010

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

A
Anonymous
March 12, 2010

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.

Willam van Weelden
Willam van Weelden
Inspiring
March 15, 2010

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices