WebHelp fonts inconsistent across different browsers

Report · May 07, 2011

I have RoboHelp HTML Version 9. As the rest of this post will explain, I'm hoping Peter Grainge can give some feedback on my question...

I really like the style/design of the content on www.grainge.org. Very minimalistic and readable.

Having recently received my "cutting edge" package of TS3, I have been working on a new WebHelp template for the company I now work for. I'm not ashamed to say I tried to emulate many of the style elements Peter uses on his site, which is why I adopted Verdana as my default font.

I noticed after generating a few topic files and viewing them in my default browser, Chrome, my Verdana font in the main body text looked much tighter than Peter's. So I added a little spacing between the characters and found it much easier on the eyes. Well, this was all fine until I was ready to begin testing the template in other browsers. For the first two I tried, Firefox and MSIE, the body text had much more spacing and the Verdana was almost unrecognizable.

My first instinct was that it was simply a browser issue out of my control that would have to be accepted. But then I opened up www.grainge.org in the other browsers and... there was absolutely no difference in how the fonts displayed. They were identical.

So either I'm doing something fundamentally wrong in my CSS styling OR... Peter is using some slight of hand to make his site consistent across all browsers.

As a possible starter, I was wandering if it might have something to do with the fixed units of size I am using -- "px" and "pt". Perhaps using proportinal "em" might help?

Thanks in advance for any feedback you can offer. george509

Report · May 08, 2011

Post the CSS for your normal style.

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · May 08, 2011

I can post my CSS tomorrow when I'm back in the office. However, instead of using normal, I am using a style I created, called "body" for my body text. Perhaps this is a clue to my problem? -Dwayne

Report · May 08, 2011

Create a new project with just one topic and in that use Normal. Set Normal to appear as you want and then see if that is consistent.

Double check by then copying the existing CSS to the new project and using Body.

How are you applying Body in your project as that does not appear in the styles dropdown or style pod?

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · May 09, 2011

Lots of discovery from your simple suggestions...

1) Here is some css from my style sheet:

P {

margin-top: 0pt;

margin-bottom: 0pt;

font-family: Verdana;

font-size: 10pt;

letter-spacing: normal;

}

p.body {

margin-top: 0pt;

margin-bottom: 6pt;

font-family: Verdana;

color: #000000;

text-indent: -0in;

margin-left: 0in;

line-height: Normal;

font-size: 10pt;

letter-spacing: 0.5pt;

}

p.body_2 {

margin-bottom: 6pt;

margin-top: 0pt;

margin-left: 27px;

}

p.body_3 {

margin-bottom: 6pt;

margin-left: 49px;

}

2) I use "body" as an old habit from my Word template designs to avoid the ripple effect to other styles caused by any changes to normal. One difference I can see now is that in Word I could have a clean body style that was not based on any other style. In RoboHelp, that appears to be impossible since all unique styles in CSS must be classes tied to a standard tag.

3) I also use body because I like to set up multiple indent levels for my body text to match my numbered/bulleted lists (body_2, body_3, etc.)

4) Finally, I followed your suggestion to create a new project and use normal instead of body and it worked. The text using normal looked "normal" in multiple browsers.

I'm guessing this means I need to abandon my old Word conventions and use normal for my body text.

Report · May 09, 2011

You are in fact using a class called Body rather than the <body> tag which is something different.

The p.body class is based on the <p> tag and will use all the attributes for that except those you specify.

P {

margin-top: 0pt;

margin-bottom: 0pt;

font-family: Verdana;

font-size: 10pt;

letter-spacing: normal;

}

p.body {

font-size: 12pt;

}

would be the same as the P tag (which displays in the dropdown as "Normal") except for the font size.

What will not be affected is the Headings or any list styles, for example.

What you were doing was not related to the BODY tag so it should have worked. Maybe if you tried again understanding the above only changing what you need to would help. Also whilst I don't think it would have any effect, maybe change the class name from body and body_1 to indent1 and indent2.

More likely your problems are related how you are indenting as the browsers own CSS can affect things. See Bullet Alignment in

http://www.grainge.org/pages/authoring/browsers/browsers.htm

This page may help a bit http://www.grainge.org/pages/authoring/html/html_stuff.htm but the best resource is http://www.w3schools.com

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · May 11, 2011

Peter,

I started over and finished a template that works correctly today.

I defined all my styles and classes directly in the css file with a text editor.

Decided that using the style pod is what got me into trouble. I kept wanting to use it like Word's style list, which, as I was reminded, works very differently.

Thanks for your help.

Report · May 11, 2011

Try finding TopStyle 3. It is now on version 4 but Google will find you the old free version of 3. It's a great CSS editor.

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Adobe Community

WebHelp fonts inconsistent across different browsers