Problems with paragraph spacing in table cells

[kmiller]

Many of my paragraphs inside table cells have space before them that I don't want. The spacing is usually fine (but not always) if I have only one paragraph in the cell and is almost always wrong when I have more than one paragraph in a cell. I have set Vertical Alignment to Top everywhere I could find it, but that didn't help, so something else must be telling Flare to put in the space before. It always looks fine in Flare until I preview or publish the topic. Any suggstions?

P.S. I'm sure this question has already been asked, but I can't find it in the forum. When I tried to tell the Advanced search to look for table and spacing (by typing +table +spacing), it told me it was ignoring the word table, so of course what I got didn't help me. Sigh.

[LTinker68]

You must have specified a top margin or top padding value on your base paragraph tag in your stylesheet. The rule of CSS is the style closest to the content wins. In this case, you have a paragraph tag inside a table cell tag (<td>). The paragraph tag is closest to the content, so the paragraph will inherit whatever style attributes you've specified for the base <p> tag, not what you've specified for the base <td> tag. The paragraph in the table cell will only inherit from the <td> tag if there is no conflict with an attribute specified for the paragraph tag.

Long story short, what you want to do is set up a complex selector in your stylesheet that essentially says "if a paragraph tag is inside a table cell, then give it top margin of 0, else give it top margin of 2em" (for example). To create a complex selector, you have to open the (topic) stylesheet in the Internal Text Editor and manually create the complex selector. In the example code below, the first code block is an example of a base paragraph tag style definition, and the second code block is the complex selector that you need to create. The styles shown are examples only.

Code: Select all

p
{
    color:#000000;
    margin-top:2em;
    margin-bottom:2em;
    font-size:1em;
}

td p
{
    margin-top:0;
}

[kmiller]

Thank you, Lisa! I'll try to do that.

I don't know nearly enough about CSS. Does anyone have any recommendations for how to learn more?

[LTinker68]

Check out http://www.w3schools.com.

[crdmerge]

Lisa, I'm looking to do some table-related things, such as smaller indents for lists and notes, and we're using table styles.

Can I assume that the td selector statements should appear in my default style sheet (xxx.css file), rather than inside the xxxTable.css table style file? The table style file seems to have nothing related to actual cell content.


Leon

[LTinker68]

Can I assume that the td selector statements should appear in my default style sheet (xxx.css file), rather than inside the xxxTable.css table style file?

For most things, yes, you'll modify the topic stylesheet, but bear in mind that the table stylesheet will be listed after the topic stylesheet in the topic after it's built, so any conflicts between the td definitions in the topic stylesheet and the definitions in the table stylesheets will be resolved in favor of the table stylesheet. For example, if you have alternating row colors in your table stylesheet, don't bother specifying a background color for the base td tag in your topic stylesheet. In other words, any attributes that you can't specify via the table stylesheet, go ahead and specify in the topic stylesheet. However, keep in mind that if you specify something on the base td tag in the topic stylesheet, then it will affect all tables in the project, including those generated by Flare at build time. The generated TOC in print outputs, for example, are built using tables. Certain types of list styles will also resolve to a table in the output. Just keep those things in mind modifying the base td tag in the topic stylesheet. You can always copy the class names out of the table stylesheet and paste it into the topic stylesheet if there's something you want to define in the table stylesheet that's not available through the table stylesheet editor.

If you're creating complex selectors to control how lists are positioned in a table, then create the complex selector in the topic stylesheet. In this particular case you're probably fine building the complex selector using the base td tag as opposed to a td class used in the table stylesheet.

[crdmerge]

Thx, Lisa

[Andrew]

You must have specified a top margin or top padding value on your base paragraph tag in your stylesheet. The rule of CSS is the style closest to the content wins. In this case, you have a paragraph tag inside a table cell tag (<td>). The paragraph tag is closest to the content, so the paragraph will inherit whatever style attributes you've specified for the base <p> tag, not what you've specified for the base <td> tag. The paragraph in the table cell will only inherit from the <td> tag if there is no conflict with an attribute specified for the paragraph tag.

Long story short, what you want to do is set up a complex selector in your stylesheet that essentially says "if a paragraph tag is inside a table cell, then give it top margin of 0, else give it top margin of 2em" (for example). To create a complex selector, you have to open the (topic) stylesheet in the Internal Text Editor and manually create the complex selector. In the example code below, the first code block is an example of a base paragraph tag style definition, and the second code block is the complex selector that you need to create. The styles shown are examples only.

Code: Select all

p
{
    color:#000000;
    margin-top:2em;
    margin-bottom:2em;
    font-size:1em;
}

td p
{
    margin-top:0;
}

One quick note on this: if you have td p with a margin-top of 0, *ALL* the p tags in your table cells will have a margin-top of 0. If you only want to get rid of the first one, you must add this:

Code: Select all

td p + p
{
	margin-top: 6pt;	
}

The p + p sets the style for paragraphs that come after the first.

[LTinker68]

Personally, I tend to put the margin on the bottom of the paragraph.

One other thing to note is that spacing isn't cumulative in common space, so to speak. For instance, if your h1 tag has a bottom margin of 12pt and your paragraph tag has a top margin of 6pt and you have a p following an h1, then there isn't a combined total of 18pt between the h1 tag and the p tag -- the actual distance is only 12pt, since that's the larger of the two. I never really caught onto that until I read it on w3school because I tend to control spacing via bottom margins -- the only top margins I have are on the heading tags, but the same thing would apply in that the larger of the two margins between the bottom of the paragraph and the top of the header would be used. That's within topics, of course -- I haven't paid any attention to how Flare handles that CSS rule when it's building outputs and the first heading of one topic follows the last paragraph of another topic.

[Andrew]

We actually add the same margin to both top and bottom. I don't remember what the issue was...at the time, I think it had to do with sometimes needing it one place, and sometimes another, and as you said, it ignores the doubled margins, so it only caused us a problem in tables...where we used td p + p to fix it.

I bet if I went through my projects now, with my much-improved understanding of CSS, I could set things up to eliminate that issue, but it's working, and it's not my responsibility anymore anyway.

[rosario]

You must have specified a top margin or top padding value on your base paragraph tag in your stylesheet. The rule of CSS is the style closest to the content wins. In this case, you have a paragraph tag inside a table cell tag (<td>). The paragraph tag is closest to the content, so the paragraph will inherit whatever style attributes you've specified for the base <p> tag, not what you've specified for the base <td> tag. The paragraph in the table cell will only inherit from the <td> tag if there is no conflict with an attribute specified for the paragraph tag.

Long story short, what you want to do is set up a complex selector in your stylesheet that essentially says "if a paragraph tag is inside a table cell, then give it top margin of 0, else give it top margin of 2em" (for example). To create a complex selector, you have to open the (topic) stylesheet in the Internal Text Editor and manually create the complex selector. In the example code below, the first code block is an example of a base paragraph tag style definition, and the second code block is the complex selector that you need to create. The styles shown are examples only.

Code: Select all

p
{
    color:#000000;
    margin-top:2em;
    margin-bottom:2em;
    font-size:1em;
}

td p
{
    margin-top:0;
}

Wow that worked for me! Saved me having to strip out all those <p></p> tags. And as someone pointed out, you may need to have <p> in a table if you have multiple paragraphs in a cell.

12 years later and the advice still works.