CSS rendering problem with non-CHM output

Report · Mar 11, 2010

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.

Report · Mar 11, 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

Report · Mar 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>

<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="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>

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>

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>

<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.

Report · Mar 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.

Report · Mar 15, 2010

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.

Report · Mar 16, 2010

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.

Report · Mar 16, 2010

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.

Report · Mar 17, 2010

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.

Adobe Community

CSS rendering problem with non-CHM output