design view is significantly different from output in Robohelp 10

[Yehoshua_Paul]

This may be normal for Robohelp 10. I am not sure.

I am applying a new CSS to my company's help project as part of a major update to the design. The CSS includes table styles, and list styles - something that was signficantly lacking from the previous design.

I have noticed that there are significant differences between what I see in the design view and what I see in the output, and this causes a lot of confusion.

When applying the bullet style, in the design view I see a numbered list. However, the output displays bullets as I specified.

When applying a table style, the table looks unformatted until I view it in preview mode or generate the project.

My roman numeral list style appears as decimals in design view, but looks fine in the output.

This is very confusing to work with, and initially led me t make many manual changes before I realized that what I am seeing in the design editor is completely misleading.

Any suggestions are welcome.

Yehoshua

[Jeff_Coatsworth]

If you’re seeing that in RH, I would think that your bullet style has gotten messed up in its definition. You shouldn’t be seeing numbers for bullets in your design view.

[Yehoshua_Paul]

This is how it is defined in the CSS:

li.Bullet1 {

}

@media only screen and (min-width: 1024px) and (max-width: 99999px){

          li.Bullet1 {

                    list-style: square;

          }

          }

[Jeff_Coatsworth]

Yes, I would expect to see that in the CSS because you said it appears correctly in the output; but what does it look like in RH's styles editor?

[Yehoshua_Paul]

This is how it appears when I edit the style in Robohelp:

This is how it appears when I apply the style in design view:

However, when previewing the page (and also when generating ouput):

As I said, it is very confusing and misleading.

[Jeff_Coatsworth]

I think you need to edit the style and take out the numbering part - when I just created a bulleted style in a new blank project, I didn't get any numbering showing up. Who created this style for you?

[Yehoshua_Paul]

I created the style. Why should it make a difference? I tried that just in case, and nothing changed. The style is very straightforward- "list=style: square" - use square bullets with this list. There is nothing else in there that should be interfering with how it appears in the design editor.

[Peter Grainge]

If you press the tab key or click the indent icon in one of the numbered items, let me guess it turns to a bullet.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[Yehoshua_Paul]

Nope. It still appears the same: numbered in design, bulleted in preview and output.

[Jeff_Coatsworth]

I was just asking if you had got it from somebody else; what happens if you try one of the sample projects - does it behave the same way?

[Yehoshua_Paul]

Thanks for the suggestion!

I just tried it on the Employee Care project. Same results.

1. I copied the CSS into the project folder.
2. Changed the appearance of one of the topics to the CSS I copied.
3. Applied the bullet 1 style to an existing bulleted list.

The same results. The list changed to numbers, but when previewing and generating the output, it is still bulleted.

[Jeff_Coatsworth]

I was sort of thinking of just using whatever bullet point style had been defined in the sample to see how it behaved.

[Yehoshua_Paul]

Interesting. In the employee care project, the bullet style behaves as it should.

I copied it into my project (empcare.css), and applied it to one of the topics. It behaved fine, and the bullets appeared as they should.

Possibly something is defined wrong in my CSS? I created it through Robohelp, and not in Notepad.

Tomorrow, I'll compare the two and see if there is any noticeable difference.

Yehoshua

[GregT42]

I'm having an issue with the indentation of the list not matching. I'm assuming it is a CSS issue as well. Also for tables, if you don't specify a width then the design view won't expand the table horizontally so the text is not fully visible whereas browsers will expand the width.

[Peter Grainge]

@GregT42

• You don't say what version of Rh you are using but assuming it is >8, see Lists on my site.
• Although not set to 100% tables usually display at that width when created unless specified otherwise. Regardless of width, the text should display. How are you creating the tables? Use the camera icon when replying and add a screenshot so that we can see the problem.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[Willam_van_Weelden]

I noticed that your style is defined in a media query. (See the right top of the CSS editor.) That means that only that specific media will use the style.

The WYSIWYG will by default only show the styles that are not part of a media query. You can either amend the style by removing the media query or select the media query the WYSIWYG needs to user.

Greet,

Willam

[Yehoshua_Paul]

@william

You solved it. When I created the CSS through Robohelp, those lines were automatically inserted in.

Since I am not interested in limiting the style to that specific media, I removed those lines, and that solved the problem in the Design view.

I am now no longer being confused when working.

Any idea why those lines were inserted? Do they hold any significance other than limiting which media gets to use the style?

Thanks!

Yehoshua

[Willam_van_Weelden]

Check your first image, in the top right corner you have ‘dektop’ selected. That’s why the media query was added. Set that to ‘none’ and you should be fine.

Greet,

Willam

[Yehoshua_Paul]

I learned something new!

Thanks,

Yehoshua

[GregT42]

@Peter Grainge,

I was using width set to auto in my CSS. I think I had multiple problems, the larger first row text looked like it was being cropped by the bottom/right cell borders in design view. But with my latest CSS, all the text displays and just a word wrap issue in design view whereas IE would expand the table to the right and no word wrap.

So I added white-space: nowrap; to my CSS and now the result in design view and IE is identical.

[GregT42]

The issue I have with ordered lists is that the browser seems to add an extra 0.5". So if my CSS styles say 0.25" margin for OL and 0.25" for LI, the combined 0.5" gets added to the browser's 0.5" and I get a full inch to the start of the text. Design View only shows 0.5".

ol {

    font-family: Arial;

    font-size:10.0pt;

    margin-top:0.25in;

    margin-bottom:0.25in;

    margin-left:0.25in;

    list-style:outside; }

li {

    font-family:Arial;

    font-size:10.0pt;

    margin-top:0.05in;

    margin-bottom:0.05in;

    margin-left:0.25in;

    list-style:outside; }

RH10

[GregT42]

I added "padding: 0in;" to each of the OL/LI styles in the CSS and the problem is solved.