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):
And here's the same topic inside the WebHelp browser (IE):
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:
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"> </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 "<a href="Blanket_Report.htm">Blanket Report</a>" 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 Correct answer
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
...
6
Replies
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
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
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.
AdChoices