Indents of body text, lists and tables

[ChoccieMuffin]

I'm having a bit of a problem (Betty - said in a silly voice while wearing a beret and a trench coat in best Frank Spencer stylee) with left margins, padding left and all things "left" and I would really appreciate some quick-and-dirty suggestions.

I have a WebHelp that has headings (all to be left-aligned - I can do that bit) with body text all indented by "a bit".

My first problem is defining how much "a bit" should be. I simply don't understand the notion of defining widths by the pixel, and for my PDF output I defined left margins in millimetres, which worked beautifully for me. My problem is that when I change my left margins for <p.BodyText>, <table>, <ul>, <ol> (with added confusion about <li>) I've got myself in a pickle. In my PDF, these were indented by 20mm for <p.BodyText> and <table>, 25mm for <ul> and <ol> and 0mm for <li>. Thing is when using pixels for measurements in my WebHelp stylesheet, I'm now getting different indents in my compiled help. I am also finding that although it looks lovely in the XML editor, that doesn't look the same as the Preview, which doesn't look the same as the compiled help.

Can anyone suggest some margins that I should apply to these items that will make the bloomin' things line up, I'm getting bald patches again!

Just going off to take some screenshots so you can see what I mean.

[LTinker68]

First, you can specify different margins for your online output and your print output. In the Stylesheet Editor, set it to the default medium, specify the margins for the online output, save the stylesheet, then switch to the print medium, specify the margins for the print output and save the stylesheet.

Second, you might want to take a look at http://www.w3schools.com and review some basics on HTML code. An <li> tag is a child of the <ol> and <ul> tags, so you would set the margin-left attribute for the <ol> and <ul> tags, not the <li> tags. There are a few other tags that are children of others, so you need to know a bit about which ones to modify. Although you may not need to do that if the paragraph below is correct, but it wouldn't hurt to read up on HTML a bit.

Third, for the positioning, an easier method may be this. Set the body tag to have a padding-left value of, say, 25px (default medium) and .25in (print medium, or use mm). Then for the h1 tag, set its margin-left attribute to -25px and -.25in. So all content will be indented except the h1 tag, which will hang a bit to the left. Make sure you test that in all outputs to make sure they all support the negative margin-left attribute.

One last thing... Go to http://www.unitconversion.org/unit_conv ... raphy.html. I use that to figure out what .5 inches, for examples, equates to in pixels or points and vice versa. You probably won't want the exact equivalency between the two mediums, but that'll give you a starting point if you need one.

[ChoccieMuffin]

Thanks Lisa (yet again!), I'll take a good long look at those links over my dinner this evening, and will take my laptop to bed with me so I can really get my head round all of this stuff.

I'm using separate stylesheets completely - when I had different mediums I really got my knickers in a twist - so your tip about changing medium I'll read as changing the primary target, as stylesheets are associated at that level in my project. But I understand the principle and that's what I'm trying to implement.

I have set my margin-left on the <ol> and <ul> tags, though I did find that if I wanted to have the bullets or numbers lined up with the body I had to indent the <ol> and <ul> tags by a little bit more. (So p.BodyText has left margin of 20mm, <ol> has left margin of 25mm and <li> has left margin of 0mm to allow the bullet or number to "hang".) That worked beautifully for my PDF but not quite so successful for my WebHelp as I'm trying to work in pixels. Will investigate your links.

My big problem is when I have a numbered list with a bulleted list as a sub-list, as the sub-list is indenting when I don't want it to. I've tried playing with complex selectors (and failed miserably, will have to gen up on that a bit more) and also using my other method, which is inserting <ul.BulletIndent> for the sub-list rather than <ul>. <ul.BulletIndent> has left margin of zero, but that still indents the sub-list too much when I create a webhelp output. (Works great in my PDF, where <ul.BulletIndent> has a left margin of 5mm rather than 25mm for <ul>, so it all lines up just the way I want it to, but I just can't get the same topic to look pretty in WebHelp, whatever I do with my left margins for that sub-list. It also doesn't look the same in XML Editor, Preview and generated output, so it's a slow process and I have to re-generate every time I change something.

I like your suggestion for indenting body, that might be a much cleaner way of doing things, I'll have a play, but I don't think that will fix my sub-list problem.

Just got to get in the car for a 3-hr drive home but will post again later with screenshots and code, if that will help. I've been mucking about with just this one problem for hours and hours and hours and I'm just about to cry, so I figured I should just go home instead.

[LTinker68]

There is something weird with the <ol> and <ul> tags that I haven't really noticed with other tags. If you set the left margin of both of those to 0 then you quite often won't see the bullet icon because those tags have a built-in indent for the <li> tag. So in this case, you might want to leave the left margin for the ol and ul tags set to "not set" (i.e., the default value) and set a negative left margin for the li tag. Or a class of the li tag. But again, test it in multiple browsers and in the print output. The browsers, for example, have different values for the default indent on the li tag, so try as you might, you may not be able to get IE and Firefox, for example, to look the same. On the other hand, that could be because I generally leave the list-style-position attribute to its default value, which I think is inside. If you set it to outside, then you might have better luck. I think that's caused some other problems with Flare, though, but I can't remember what. But try it and see.

[ChoccieMuffin]

If anyone else is following this, here's the page from W3schools that explains lists, including how to get them to work in all browsers:

http://www.w3schools.com/css/css_list.asp

Currently working through it and trying to get my head round it. (BTW only 1 and a half hours in the car, the traffic was much better than this morning's 3-hr journey.)

[ChoccieMuffin]

Right, I am very confused now.

Using a test topic, and a test stylesheet, I STILL can't get the amount of indent to work properly. I used this exact code in the W3Schools "try it for yourself" bit (that's excellent, helps you get your head round what's going on) and here's what it looks like:

Nested lists W3Schools editor.png

Here's my stylesheet:

Nested lists test style sheet.png

Here's what it looks like in the XML editor:

Nested lists XML editor.png

[ChoccieMuffin]

The problem is, THIS is what it looks like when it's compiled. I've been banging my head against this one for two days solid now, and many hours on and off before this, and I just can't figure it out.

WHAT AM I DOING WRONG???

Nested lists compiled.png

[NorthEast]

First-off, I'd suggest ditching the styles that you've set up; you don't need to use any classes to achieve what you want.

Anyway, I've adapted the the code from my own stylesheet and put in margin/list settings that (I think) roughly match yours; open the stylesheet in text mode and copy/paste :

Code: Select all

ol { margin-left: 60px; padding: 0px; list-style-type: decimal; }

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

li {margin-left: 0;}

ol ul,
ul ul
{ margin-left: 20px; list-style-type: circle; } 

ol ol ul,
ol ul ul,
ul ol ul,
ul ul ul
{ margin-left: 20px; list-style-type: square; } 

ul ol,
ol ol
{ margin-left: 20px; list-style-type: lower-alpha; } 

ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol
{ margin-left: 20px; list-style-type: lower-roman; } 

li p
{ margin: 0; padding: 0; } 

What it does:
- First it sets the normal margin/styles for the tags: ol, ul, li.

- Then it sets the variations to those properties for: all 2nd level bullet lists, all 3rd level bullet lists, all 2nd level numbered lists, all 3rd level numbered lists.
For example, for 2nd level bullet list we define: ol ul a 2nd level bullet list inside a numbered list, and ul ul a 2nd level bullet list inside a bullet list. For the 2nd level bullet list properties, we want a 20px margin (not 60px) and a circle (instead of disc).

- The final p style is to set the margin/padding to 0 for paragraph tags used inside list item tags (as your base p tag might have margins).


You might need to tweak the margin settings, but it should be quite clear.

[ChoccieMuffin]

Dave, you are amazing, I bow down at your feet in admiration. You've only had this question for a matter of moments and it's taken me days to get to where I'd got to!

I will have a play in my test topic and will (hopefully!) report back to you with the results. I KNEW there was a simpler way to do it, I just couldn't figure it out. And I also couldn't figure out why it looked ok in the XML editor but looked complete pants in the compiled topic - probably because it was so bloomin' complicated.

I know this will mean me going through my project and changing stuff in my topics, and then changing indents etc in the stylesheet for PDF output as well, but this is fantastic and means that it's all loads neater than it was to start with - always a good thing!

Thanks several million, and then some.

[NorthEast]

I know this will mean me going through my project and changing stuff in my topics, and then changing indents etc in the stylesheet for PDF output as well, but this is fantastic and means that it's all loads neater than it was to start with - always a good thing!

It all works fine in PDF output too; for mine, I just have a 'PDF' medium with the sizes set in points instead of pixels.

In most cases you shouldn't need to apply any classes to tags in your lists; using CSS alone you can set up your list styles at the different levels.
The only time I ever need to use classes in my lists is to create an entirely different list style to the normal; e.g. I use a ul.checklist that has tick image instead of bullets.

[ChoccieMuffin]

What I meant was, I'll have to muck about with the stylesheet for the PDF output to make sure the margins work properly, as well as chucking out all the extraneous bells, whistles, ribbons, labels and classes that I've put in the topics. I won't mind doing it though, as it will produce a much cleaner and less "breakable" file. Again, my thanks.

Now why can't the documentation (somewhere in the thousands of pages) contain a practical example like YOU have just posted? This is worth at least several hundred pages of Flare docs. MADCAP, TAKE NOTE!!!

[NorthEast]

Indeed - learning to use Flare is one thing, but you also need to learn a lot about CSS/HTML in order to get the best out of Flare.
Luckily I had the luxury of having a few months to immerse myself in CSS/HTML and Flare, before I had to create my stylesheets and projects.

[Andrew]

Indeed - learning to use Flare is one thing, but you also need to learn a lot about CSS/HTML in order to get the best out of Flare.
Luckily I had the luxury of having a few months to immerse myself in CSS/HTML and Flare, before I had to create my stylesheets and projects.

Yep, I think the first step of anyone who wants to use Flare to *design* documents (or implement someone else's design) is to bone up on a bit of xhtml / CSS. Otherwise, you will be constantly mystified by what happens; unlike tools such as Word (or RoboHelp, back when I used it), Flare respects the structure of html / xhtml, and expects you to contruct your documents as xhtml documents, not as WYSIWYG approximations. The resulting system is much more flexible and reliable from output to output, once you understand the basics (which are not very "basic" regrettably).