Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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;
}
}
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
Nope. It still appears the same: numbered in design, bulleted in preview and output.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
Thanks for the suggestion!
I just tried it on the Employee Care project. Same results.
The same results. The list changed to numbers, but when previewing and generating the output, it is still bulleted.
Copy link to clipboard
Copied
I was sort of thinking of just using whatever bullet point style had been defined in the sample to see how it behaved.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
@GregT42
See www.grainge.org for RoboHelp and Authoring tips
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
@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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
I learned something new!
Thanks,
Yehoshua
Copy link to clipboard
Copied
@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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
I added "padding: 0in;" to each of the OL/LI styles in the CSS and the problem is solved.