Vertical alignment in table cells not working in generated output

[Guest]

Using RH9 WebHelp. I have created a simple table style. Because I could not find out how to make cell vertical alignment (top, center, bottom)  part of the style definition, I have been applying it manually to individual whole tables using the cell alignment properties.

This worked fine for a while, but at some point I noticed that even though the tables look right in Design view, with top-aligned cells contents, it gets hosed in generating output and all tables now come with vertically centred cell contents even through the in-line formatting for top alignment is still there in the code.

Any ideas?

[Willam_van_Weelden]

Hi,

Can you post the HTML of the table? I'd like to take a look as it seems to me that your style definition is off. I just tested in a simple project and the vertical align works in WebHelp on FF and IE8.

You can add the alignment in the css through the property vertical-align: top, middle, bottom. I don't think there's a way to set this in the Robo css editor, I hope someone else can confirm that. Just add the desired alignment to the td style of the table.

Greet,

Willam

[Guest]

Thank you, William.

What is “off” in my opinion is that what shows in design view (top alignment) is different from what comes out after generating Webhelp (center alignment).

I have found that I can correct the problem. It appears that even though the whole table is set to top-aligned content (and appears so in design view) it is necessary for me to also apply top alignment at the row level in order to have the generated output top-aligned.

This is true only in some tables, not others, so my guess is it is something to do with order of precedence in css rendering.

Mike West

[Willam_van_Weelden]

Hi Mike,

I'm confused to where you applied the vertical alignment. Normally, I would set this for the table cells and not the table.

CSS has indeed an order in rendering: There is a point system for determining the CSS to apply. See http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specificity/ for a short introduction.

And as an extra to the point system, the place where the styling is present, also determines the styling. Browsers use the following hierarchy (in descending order)

• User style sheet defined in the browser.
• Inline styling.
• Style block in page.
• External style sheet

You can overwrite styling from a lower order using the !important declaration. You can use this to make sure that inline styling will not be able to overwrite styles from your style sheet. (Unless the inline styles use !important themselves.) Example:

table.mytable td {

     vertical-align: middle !important;

}

This will make all the content of table cells in the table with the class mytable to be vertically centered.

Greet,

Willam