Vertical alignment in table cells not working in generated output

Question

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?

Answer 1

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-specific ity/ 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