CSS not rendering correctly in Flare, but maybe that's okay?

[beagley]

Okay, here’s one for you CSS experts.

Flare does not seem to be rendering CSS correctly, even though it seems okay in the browser. Someone tell me if I’m doing something wrong.

I INDENT my whole procedure 4.5em.

Then I indent my “step title” paragraph style -4.0em. I also change p.steptitle so that it has “Step {n+} for auto-numbering. I created the yellow background by wrapping another div around each step. (For anyone who tries to recreate this, please note that you'll need a "steptitlefirst" paragraph class for starting autonumbering at 1.)

Notice in the images below how the numbers do NOT line up with the yellow boxes in Flare. (The SECOND image below is my browser, the desired result.)

So, what’s up with that? Maybe Flare's CSS renderer is confused by Flare's auto-numbering? It all smooths out when I get to my compiled WebHelp. Which is great, but weird. So I can LIVE with this issue, but I'd rather understand it.

In Flare:



In my browser:

[LTinker68]

I'm just guessing here, but it could be because ems is a proportional font, and it's not until the page is rendered in a web browser that it finalizes the size of the em. The XML Editor isn't a fully-functioning web browser, just close to one. That's why some effects don't appear correctly until you build the output and view it in a browser. Such as floating a DIV to the right. Boy, does that cause me problems.

If this is the only difference between the XML Editor and the final WebHelp output, consider yourself lucky.

[SteveS]

My guess is Flare is not 'reading' the auto number variable when it is rendering in the preview browser.

Don't worry too much about the preview - as has been said it is a case of what you see is one possibility, rather than what you see is what you get!