Simple table with graphic causes mis-aligned text

[JudyH]

I have a graphic. I want to place descriptive text to the right of the graphic, as it is rather tall and narrow and space will be otherwise wasted.

The obvious solution, I thought, is a table -- place the graphic in one column and the text in the second column.

On the design form, it looks fine. In the preview and compile, the text does not begin to appear until the bottom of the image in the column to the left -- all of the above space is lost again.

I know a bit about html, so I went to the XML editor. Everything appears to be in order. If I were to place this in a standard html page, I doubt there would be a problem. But the compile keeps placing the text to the right in column B, but positioned below the bottom of the image in column A.

I've been working with alignment and positioning settings, but getting nowhere. As this appears fine in the design mode, I must be missing something. How can I override the repositioning of the text in column B so that both the graphic in column A and the text in column B are aligned to the top of the table after compiling?

[LTinker68]

Did you try floating the image in a paragraph instead of using a table? I think HTML Help supports floating. Create a custom img class and set its float attribute to left or right, depending on which side of the paragraph you want the image positioned. Write your paragraph, then insert the image as the first item in the paragraph. Apply the img class to the image. The XML Editor should show the image in its designated floating location, with the text of the paragraph flowing around the image. Build the output to double-check that the HTML Help supports the float attribute.

[JudyH]

Thanks, I'll give that a try.

I'd still like to know why a simple table structure isn't being compiled as expected, though. As I noted, it looks fine in design mode; it's the output that's mispositioned.

[LTinker68]

The authoring mode isn't always accurate and I don't build HTML Help so I'm not sure how accurate the Preview window is. At first I thought it sounded like your td tag has vertical align set to bottom as the default value, or perhaps there's no value set and the default for browsers is aligned to top which is why it's fine in the XML Editor, but HTML Help might default to bottom, which is why it's wrong in the output. After re-reading your post, though, it almost sounds like the text isn't in the second cell but somehow moving to the first cell below the image. Is that what's happening?

[JudyH]

There are two columns, one row, for a total of two cells. In design, the contents of both cells are positioned at the top (where I want them). In the output, the text in the second cell is still in the second cell but has dropped so that it doesn't begin to appear until below the bottom of the image in the first cell.

What I want:
X O

What's output:
X
__O

I've tried ensuring the image has no thumbnail property; forcing alignment; working with positioning. All look fine in design but stagger in the output.

[LTinker68]

I'd still double-check the stylesheet, or even specifically set the td's vertical align property to top. The XML Editor is based on an Internet Explorer engine, not the HTML Help engine, so it will get you close, but if the default cell positioning in HTML Help is bottom, then you won't see that until you build the output. Setting the vertical-align to top will at least rule that out as a possibility, if doing so doesn't fix the problem.

The other thing I'd do is open the topic in the Internal Text Editor and see if there are any inline styles that could be screwing things up. Those I would expect to affect the XML Editor, but it's something else to rule out. And again, the XML Editor is an approximation, but it doesn't have all the bells and whistles applied to the content, so it's possible there's code in the table that you're not seeing the effect of until you build.

You might also double-check to see if you have any other style attributes in the stylesheet that might be causing a problem. For instance, I usually put a margin-bottom on my <p> tag for separation from following content, but if you put a margin-top on instead and your content in the second cell is inside a <p> tag, then it would be using that margin-top value. Likewise, if you have a complex selector defined for how paragraphs or images behave inside td tags, then that could be an issue, too. Although I'd also expect the complex selector's effects to be visible in the XML Editor, which is why I'm more inclined to think that there's nothing defined for the vertical-align property for the td tag and the default value in the HTML Help viewer is different than the default value for IE, which is what the XML Editor would be using.

[i-tietz]

Or it's not a td, but a th. For header rows in tables (=th) it might even be the default for display. Make sure you set the vertical-align (or is it text-align?) to top.