How to change indent of UL in non-print output?

[mjansari]

Can someone tell me what property i need to adjust in my .css template (non-print) so that the bullets in my UL align with the paragraph above?
When I generate a PDF, the alignment is fine.
See the followning image to get an idea of what i want to do.

Image2.png

Thanks!

[kwag_myers]

It should be margin-left of the ul style, but even with a negative value in both the ul and li styles I get a margin. I've tried wrapping the ul in a div with a negative value, too.

[LTinker68]

Try setting the margin-left value on the li tag, not the ul tag. Make sure you test it on multiple browsers (assuming you're users aren't locked into just one browser). Browsers don't match on how they treat bullets, so you have to go with a happy medium. If you want the bullets to left-justify with the margin, you might get that to work in IE, but it'll be slightly left or right in FF, or vice versa. Don't know about Chrome or Safari.

Now that I think about it, I'm not sure I've ever tried adjusting the ul and li left margins. Don't think I've tried padding either. Something else you might want to look at.

[kwag_myers]

I think I found it. Check the Medium menu in the CSS. If it's set to anything but Medium: (default) the output stylesheet does this weird thing where it creates a section:

Code: Select all

@ media non-print

Anyway, set the Medium menu to default and set the margin-left to -24px. I tested it in both FF15 and IE8 with identical results.

[LTinker68]

If it's set to anything but Medium: (default) the output stylesheet does this weird thing ...

It's not a weird thing. Mediums are common in CSS. They're to control the appearance of the online help in different situations. The most common one would be printing from the web page. Support your heading tags use a light font color. That might appear fine on a monitor, because, let's face it, who uses a monochrome monitor? If the user prints that topic to a black-and-white printer, however, the font color might be too faint to show up well on the printout. Lame example, but you get the drift. The print medium in a stylesheet is to control the appearance of the topic when it's printed.

Also, if you create print output in Flare (e.g., PDF), then Flare by default looks to the print medium in the stylesheet. If there's nothing in the print medium, then it goes to the print medium's parent, which is the "default" medium. Most people style their PDF output differently from their online output and put their styles in the print medium, in a new medium they create (e.g., printPDF), or use a second stylesheet just for print output.

[kwag_myers]

It's not a weird thing...

At the risk of arguing semantics, when I set a (non-print) Medium and generate what I consider to be a "non-print" output, e.g., webhelp, the (default) style is used instead of the (non-print) style. That, imho, is weird/strange/unexpected behavior.

My point is, you have to look at the output CSS file to see what's happening. You may have up to three styles for ul (unless you've created some custom Mediums). The trick is to understand which one (print, non-print, or default) your output is using. According to Help, when using (non-print) you must associate the Medium with the target.

[LTinker68]

It's not a weird thing...

At the risk of arguing semantics, when I set a (non-print) Medium and generate what I consider to be a "non-print" output, e.g., webhelp, the (default) style is used instead of the (non-print) style. That, imho, is weird/strange/unexpected behavior.

First, is your target set to use the non-print medium? By default, Flare will point to the default medium for online outputs and print medium for print outputs. You have to specifically set the target to use the non-print medium if you want the non-print medium to be the primary source of styles. If something isn't defined in the non-print medium, then it will look to the default medium for the definition. If it's not there, then it will use the browser defaults (for online output - not sure where it gets defaults for print outputs).

Second, if you had the target set to the default medium and generated output then switched the target to non-print medium, make sure you delete the output folder before rebuilding. The browser will cache some things, so it could be you're looking at a cached image of the help. If you delete the output folder before building, then it'll trick the browser into thinking it's going to a new website. That's if you're viewing the help locally. If it's on a web server, then a forced refresh will work with IE, but for FF I've been having to delete my browser history and other items to get it to truly reload the help from scratch.

[mjansari]

The medium is set to non-print. However, I will have another look to make sure that it's using the correct medium. We're in the process of redesigning our template so it may take awhile for me to post my findings.

Thanks!

[mjansari]

To follow up on this, my target is using the non-print medium and changing the margin-left value on the li tag to -24x did the trick.

Thanks everyone!