Only Today Matters! (see Topics and Drivel for yesterday's views).


Wednesday, October 1, 2008

Things You Discover Accidently

Timeout from the Template trials to mention a little tidbit I found yesterday.
(Disclaimer - We could have been doing this all wrong for years. I understand CSS about the same way Genghis Khan understood quantum physics, but like him, I trust my instincts. I will ask the Flare crew for an opinion at some point.)

Since back in the RH days, our help topics have had a Product/Company masthead on every page. In RH you set up the style for the topic background and attached a graphic, and you could open the css file and see the code that included the graphic in the html Body element.

The code:
BODY {
font-size: 8pt;
font-family: Verdana, sans-serif;
background-repeat: No-Repeat;
background-attachment: scroll;
background-color: #ffffff;
background-image: url(SHLogo.gif);
}
The look:







When we moved our help to Flare, we duplicated this, but it always looked a little funny in the Flare XML Editor.




It looks fine compiled, and previews fine, but it is annoying in the editor.
What I think is going on here is that the XML Editor (noticed that I did not call it something that begins with W) would not display the margin-top: 30pt setting for the H1, but the compiled help handled this correctly.

Our solution was to fake it by inserting an index keyword on the first line that of course did not show in the compiled version but made the editor look tidier.







Still, all is not right with the world. If you look at the upper right corner of the snapshots, you can see a small gap between the top of the graphic and the top of page. If you look at the bottom left of the graphic, you can see another glitch. What is happening is that the editor is displaying the graphic twice, overlapped. We could never figure that out.

With the advent of Flare 4, the XML editor now correctly displays the margin-top: 30pt setting for the H1, but something still was wrong.

Here is the same topic opened in Flare 4. The offset is even more pronounced. I also showed the structure bar, and that gives a hint of what is going on.





Notice the matching offset in the structure bar between the html bar and the body bar - it matches the graphic. Here is how it looks without the para for the index tag:





Notice that the background graphic looks great nestled up in the left corner aligned with the html structure bar, but why is it repeated at the start of the body bar?

It looks like the XML Editor realizes that it needs to display the graphic in the upper left corner, but then the code that displays the body tag also feels compelled to display the graphic as well.

So I reasoned, "Well I don't need both" and went into the stylesheet editor and added the graphic to the html style class in the css. Trust me, the picture looks exactly the same.

Then I deleted the graphic from the Background properties in the body style class. Now it looks correct in the WYSIWD ('what you see is what we display') editor.




I did not know if it is a good idea to attach the masthead graphic to the html class tag. Looking at the compiled Help, I am thinking 'not':






So I guess I should file a bug report, finally. I have to confess that for the first few years as a Flare user, I kept quiet, searched for answers, and made my own workarounds. I have been the same way with RH and Frame and Word; just not much of a rabble-rouser.

Now I am feeling a little more militant, or maybe just more cranky as get older. Or maybe I feel empowered by Madcap's responsiveness, and deep down I like what they are doing. I like the tool and I want to see it improve, as well as have my colleagues like it just as much.

But for now my index tag workaround will stay in place.

No comments: