Styles change during preview and build

[michaelgd]

My target is WebHelp. I have written a topic and formatted it the way I want it to look. However, when I view it in preview mode or build the help file, two of my paragraphs change. One is a numbered style and the other is a bulleted style. I created both style classes using the LI style. The font is too large and then typeface has changed. Even the indentation and paragraph spacing is different.

In fact, for a better description, both styles look exactly as if you created a new topic, input some text, and used the toolbar button to add bullets and numbers. I cannot seem to get my output to look like anything other than the default styles.

Any help would be appreciated. Any ideas?

[lacastle]

You are supposed to use the toolbar buttons, and then modify the ol, ul, and li styles in the stylesheet. and when you edit this part of the stylesheet, make sure the medium is correct and it matches the medium you are trying to view in the topic editor. how were you formatting it?

Also, it is very common for the WYSIWYG to look different than the preview and the output. it's a "feature" of flare

welcome to the forums!

[michaelgd]

Hi Laura:

Yes, I did use the toolbar buttons to start with. That seems to be the only way to be able to tag a paragraph with the LI style. But I only mentioned the toolbar buttons to give you an idea what the output looks like. My topic has the numbers and bullets all left-aligned with similar spacing between the bullet or number and the text.

But the output is not just a little off, like, say, the alignment. In RoboHELP I have had situations where the alignment and the bullet character looked slightly different on the editing page than in the output. But I have never had a difference like this. It isn't even something I could mess with, like adding or subtracting spacing. The entire paragraph is off. I even changed the font and point size and there is no change in the output. Almost like the system will not let me change the default bullet and number styles.

Oh, I also spent hours attempting to use the P style to create bulleted and numbered classes but gave up. Apparently I cannot do in Flare just about everything I was able to do in RoboHELP. When it took me hours to do what I did in RoboHELP in about three minutes, well, it makes one wonder...

Mike

[lacastle]

There are a lot of topics here with information about formatting lists using paragraph styles (i can find some tomorrow, but i'm running out the door now).
And, there is a very big learning curve for Flare. have you read the help guide about switching from robohelp to flare?

[michaelgd]

Yes, I looked it over. Totally useless...does not cover anything in detail.

[Nita Beck]

What do your list items look like in the code? Perhaps if you'd paste in some code for us, we'll be able to spot the problem. I suspect that there might be some residual inline formatting from RoboHelp.

Also, you say:

I even changed the font and point size and there is no change in the output. Almost like the system will not let me change the default bullet and number styles.

Underlying your project's stylesheet is a stylesheet called Madcap.css that authors cannot directly edit. Sometimes, in order to get the styling one is looking for, it is necessary to specify some attribute that will override the attributes coming from the Madcap.css stylesheet. One such instance that comes to mind is the black line that appears over the TOC proxy in print output; it's defined in the Madcap.css stylesheet, yet in the project's stylesheet, that black line is nowhere to be found. To override that black line, one must do something in the project stylesheet such as change the color to white.

I bring all this up because perhaps there is something going on from the Madcap.css that you'll need to override in order to make your list items look the way you want.

FWIW, I was a loyal RH user for many years. I too got very frustrated making the transition from RH to Flare. Then, one day, I started to glimpse why Flare was superior to RH, and gradually the proverbial lightbulb over my head got brighter and brighter as I came to understand how powerful Flare is and how I could use it. It was a long climb, but well worth it. If you have a chance to connect with other Flare users in your local community, you might want to get together with them to help you along your learning curve. I started a user group in my community 2.5 years ago and immediately began to reap the benefit of putting several Flare minds together to solve and strategize design issues. I realize that my suggestion doesn't help your immediate problem. Please do post some code so we can help you...

[michaelgd]

Please look at my original post and you will see that I did not import the topic or the text from RoboHELP; I built it from scratch in Flare.

I simply want to create two styles that Flare will not let me create. This is unacceptable. I have a huge project that cannot afford a learning curve of several weeks or months.

[i-tietz]

Could you post the source code of those paragraphs and their "surroundings" (switch from XML editor to text editor)?
A lot of things can cause sth like that - and stylesheets have their part in that.

And IMHO it's far more efficient if we try to find the cause of that behaviour instead of ranting and mourning ...
@michaelgd: Sorry to hear you started your learning curve after installing Flare instead of before. RoboHelp and Word are very different from Flare which uses (X)HTML and CSS. So actually it would have been smart to get familiar with it before jumping into production but since you,like many others here, didn't do that, you will find help here - at least that's what I expect, knowing the "posters" on these forums for quite some time now.

[NorthEast]

Please look at my original post and you will see that I did not import the topic or the text from RoboHELP; I built it from scratch in Flare.

I simply want to create two styles that Flare will not let me create. This is unacceptable. I have a huge project that cannot afford a learning curve of several weeks or months.

To be fair, I'm not sure your post says how you created your project, so it's understandable why that might be mentioned since you refer to RoboHelp a few times.

Standard HTML lists are constructed from a 'container' tag which is either a ol (numbered) or ul (bullet), and inside these contain li (list item) tags. These is the type of list you'll get if you use the toolbar icons.

So how they appear will depend on the combination of styles used for the ol/ul and li tags. As both bullet and numbered lists use li tags, you typically set things like the bullet/number format on the container ul/ol tag.
If you add other tags inside the li (list items), bear in mind that they might have their own styles too. A common example is if you insert a paragraph (p) tag inside a list item (li), and your paragraph style has a left margin; the result is that the list item with the paragraph will appear to have an increased margin relative to other list items.

The other type of list format is using Flare's 'autonumber' formats, although by the sounds of it I'm not sure you're using that method. These are typically used when you need to have more advanced numbering formats, numbered headings (i.e. not in consecutive lists), or add styles for things like notes/tips.

I think you'll need to post some examples of the HTML and CSS code to get to the root of the problem.

[crdmerge]

Go to http://www.w3schools.com/css/css_list.asp, the W3 site, for info on styling lists. Use the "Try it yourself" feature to test all types of formatting possible in your style sheet (although I wouldn't recommend an image as list item marker, as they do). Once you have these set up, it's a simple matter of using the toolbar buttons (bullets and numbers, as well as the indent for sublists). For example, the following code shows the specific styling for a two-level bullet list. Any further styling for the list items would require code for "ul li" and "ul ul li".

Based on your particular doc requirements, you would nail down every possibility such as "ul ol", "ol ol", "ol ul", in addition to the "ul ul" mentioned here. (We don't allow anything beyond two levels, but you could certainly go to "ul ul ul", "ul ol ol", etc. if needed The thing is, once your styles are set in the style sheet, it's a plug-and-play operation: select all list items and set the outer list for number or bullet, then select the sublist items, click the indent button, then choose bullet or number for that sublist.

Code: Select all

ul
{
	list-style-type: square;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 15px;
	margin-left: 15px;
}

ul ul
{
	list-style-type: disc;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 8px;
	margin-left: 8px;
}

Good luck,
Leon

[i-tietz]

Try deleting the history of your browser. Maybe those topics are in there ...

[RamonS]

This is unacceptable. I have a huge project that cannot afford a learning curve of several weeks or months.

No offense, but when you have a huge project looming then maybe now wasn't the best time to swap out your core tool.

[michaelgd]

You people just don't read, do you?

I DID NOT refer to RoboHELP in my initial post. I referred to it in my next post SIMPLY AS AN EXAMPLE to explain how it acted in RoboHELP. So there was not a mention of importing any RoboHELP files.

Also, I never said the help system was in production. All I said was that we switched to Flare (I wasn't here then) and we have a large project that we have brought into Flare and that I don't have hours and hours to do what could be done in minutes. Very frustrating is all.

I know no one who gets familiar with an application without using it. So to say I should have learned about it before I started playing around with it is nonsense. The only way to learn is to do.

Finally, it turns out that it was a bad installation after all. I installed it on another machine and it worked fine. Performed exactly as I wanted it to. I then uninstalled and reinstalled on the original machine and now it works fine.

I sure as hell hope Flare doesn't decide to crap out like that again in the middle of a help project.

Thanks for all your help.

And FYI: this is not the only place where folks don't carefully read posts before they answer them. I have been on other forums where folks will tell me to try exactly what I told them didn't work. So my comments and impatience were not a dig at this group.

Regards,
Mike

[NorthEast]

Considering that quite a few people here have bothered to take time out to try and help you with this, I'm really not getting why you have such a crappy attitude.

[i-tietz]

Nevertheless: Do learn some more about HTML and CSS - it really helps keeping frustrating situations at bay. We are six in our department working with Flare and only two of us know HTML and CSS => The other four are frustrated and swear and shout ... we don't ...

[lacastle]

Nevertheless: Do learn some more about HTML and CSS - it really helps keeping frustrating situations at bay. We are six in our department working with Flare and only two of us know HTML and CSS => The other four are frustrated and swear and shout ... we don't ...

i agree with this. knowing html and css BEFORE i knew flare has helped a lot, especially if i need to go into the text editor and fix something (not often).

[kmorrison]

For what it's worth, I had the same problem as michaelgd. Specifying no padding in my <ul> and <ol> styles (like crdmerge shows) did indeed get rid of the extra space in front of lists in my HTML5 output. Also, specifying a disc for the bullet got me nice normal round bullets. Thanks!
(I didn't have to do anything to my complex selectors, I guess because they inherit the property from the main list styles)