table cell bullets

[livetoski]

I need bullets in my table cells.

How do I best do that? I have copied and pasted the p.bullet style information onto the td.bullet style, which makes for a bullet that's too big and not indented. Trial and error will tell the tale, but I'd like some help with a straight path. There is obviously a relationship with the table style that I am missing.

Linda

[Dave Lee]

If you create a paragraph tag inside the table cell (easy way to do this is to press Enter), you should be able to add your normal bullet lists and other formatting.

[LTinker68]

Note that if you're using proportionate font sizes (em, %), then your font sizing is going to be off. In that case, you'll need to create complex selectors. If you're using non-proportionate font sizes (px, pt), then you shouldn't need complex selectors.

[livetoski]

Thanks Dave. The paragraph style tags were what we had originally when we brought everything over from FrameMaker.

We are trying to avoid using paragraph tags which requires individually formatting each table.

[livetoski]

Thanks Lisa. What do you mean by a complex selector?

There is something I am missing here, just exactly how to create a td.bullet style, that will just be adjusted by padding etc when I apply a table style, but won't get overwritten.

I am using non-proportionate font sizes anyway, so should be good.

[LTinker68]

...just exactly how to create a td.bullet style...

Technically, there's no such thing, not the way you mean. Table cells use the <td> tag, and bulleted lists use the <ul> tag (numbered lists are <ol>). If you want a list inside a table cell, then you have to have a <ul> tag set inside a <td> tag set. So the actual code would be something like:

Code: Select all

<table>
   <tr>
      <td>Row 1 Col 1 text</td>
      <td>
         <ul>
             <li>List item 1 in Row 1 Col 2</li>
             <li>List item 2 in Row 1 Col 2</li>
         </ul>
      </td>
   </tr>
</table>

If you go with the default margin values for the list, then lists will be indented the same value, whether the list is inside a table or outside of it. If you adjust the margin values for the <ul> tag in the stylesheet so that the list is near the edge of the table cell, then you're also going to be removing the indent value for the list when it's not in the table. This is where complex selectors come in. Basically, they're if/then situations. In this case, you're going to create a complex selector for how a list behaves inside a table, so it's if a list is inside a table then do this to its styles.

At the moment, however, you can't create a complex selector from within the Flare Stylesheet Editor. To create the complex selector, right-click on the main stylesheet in the Content Explorer, and select Open with > Internal Text Editor from the popup menu. Enter the following code at the bottom of the stylesheet, then save the stylesheet and close it. When you're inside a table cell, click the list icon and switch it to a bullet-type list. It will automatically pick up the styles from the stylesheet and adjust the list margin accordingly.

Complex selector to add to stylesheet:

Code: Select all

td ul {
   margin-left:0;
}

(You might have to play with the margin-left value to get the desired distance. You might want a pixel or two between the edge of the cell border and the list.)

[livetoski]

Thank you for your patience Lisa, I appreciate it. I have been reading up on css and html and following up on other things you have posted. I will try this right now, since we need to solve this problem.

am following up with http://www.w3schools.com/html/html_examples.asp, a link you posted a while back. Thanks for that.

I am afraid that rulers are going to start appearing in my online topics, just because I can! I will have to restrain myself...Talk to you later. Linda

[livetoski]

Hi, I have two issues:

1. do you mean the main style sheet or the table style sheet?
2. how do I get more text in a table cell without pressing enter to get to a new line? Each time I press enter, it reformats eveything to paragraph tags and I have to go into an html editor to remove them, for some reason I can't get rid of them any more through the XML editor.


This is what I put in the main style sheet, and initially the bullet appeared, in the wrong font, but moved over, and I was heartened.

td ul
{
margin-left:5;

}

So then I changed it to this:

td ul
{
margin-left:5;
font-family: Verdana;
font-size: 8pt;
line-height: 12pt;
}

And saw nothing. In fact, it wasn't even indented now. I don't know what I was seeing in the first instance.

[KevinDAmery]

Not sure if this is it, but what jumps out at me is your margin-left doesn't have any units. Specifying that can't hurt.

[livetoski]

That worked Kevin, doh. Thanks. Now how do I get it to be 8pts?

Lisa was kind and told me nicely how to get to the next line without pressing enter (pressing shift + enter).

Thanks all.

[KevinDAmery]

Just change the code to say

Margin-left: 8pt;

That should do it.

[livetoski]

Thanks Kevin. here's what I have in my css:

td.ul
{
margin-left: 2in;
font-family: Verdana;
font-size: 8pt;
font-style: normal;
font-weight: normal;
}

I want the font size to be 8pt.
I see nothing changing except the margin moves around. I also can get this item to appear in my style sheet editor. I have resigned myself to using paragraph tags and the bullet icon. I also have to keep editing the code since using the XML editor isn't as precise as I would like, and sometimes I am unable to remove paragraph tags (I am using 3.1).

[KevinDAmery]

Ok, maybe I missed something--what size is the text coming in as if it isn't 8pt? (I thought we were talking about you not getting an indent... )

What you might want to do is go back to Lisa's post where she introduced the concept of the complex selector. In that post, she also pointed out that if you are using proportional fonts anywhere, when you nest tags inside tags then BOTH sizing options get applied. E.g. if TD has a size of 0.8em and TD P has a size of 8pt, the 8pt type will get scaled down by the 0.8em.

[livetoski]

Hi Kevin, the font is returning in Verdana and 12 pt, just like the bullet would if it wasn't in a table cell. The only change is the indent. I use pt only, so I didn't think a complex selector was required.

[livetoski]

I now assume I just have to format each bullet manually, generate and see what happens. The next question is what will happen when it gets translated. Argh!

[KevinDAmery]

Ok.... the other thing I would do, then, is check that you're applying the change to the correct media. Flare can apply style settings to Online, Print, or both (which it calls Default). So if your changes are in the Print section and you're looking at online output, naturally you won't see anything different.

If you're in the Flare stylesheet editor, you can check the medium by using the appropriate pulldown. (One caveat, though: sometimes when you change between styles the medium display doesn't update properly, and you have to switch back and forth a few times before it takes. Yeah, it's annoying--if it happens to you, submit a bug to Madcap to let'em know that you, too, don't like it much....) If you're in a text editor, the default styles are at the top, the Print styles are after the @media Print line (and are usually indented) and the Online-only styles are after the @media non-print line.

[KevinDAmery]

Hi Kevin, the font is returning in Verdana and 12 pt, just like the bullet would if it wasn't in a table cell. The only change is the indent. I use pt only, so I didn't think a complex selector was required.

A complex selector is required any time you want the nested tag to behave a certain way. It isn't just related to font sizing--it also affects indents, margins, colours, you name it. If you don't use a complex selector, then all of the styling for both the outer tag and the inner tag are applied. (For example, if you put a P tag inside a TD tag, and they both had a margin-left of 2in, then the P tag would end up with 4in of indent--probably not what you want. To get around it, you would create a TD P complex selector and set its margin-left to 0, so that the TD tag's indent would be used but the P tag wouldn't add on to it.)

[livetoski]

I originally did have

td ul in the css (as opposed to td.ul), which didn't show up in the style editor. It also didn't change the font, but perhaps I just don't get it.

Anyway, it's impossible to format cells without using paragraph tags because the td style class doesn't allow for a hard return, and unless I use a hard return I can't use the ul code. I have to use the ul code because the p.bullet style, or p.cellbullet, produced the actual code in our translated docs.

Do you see any way around this?

[SteveS]

Hi Kevin, the font is returning in Verdana and 12 pt, just like the bullet would if it wasn't in a table cell. The only change is the indent. I use pt only, so I didn't think a complex selector was required.

Your styleheet snip you posted should be giving you an 8pt font, so something is "nearer" in the cascade.

If you open the topic in a text editor can you see any inline formatting that's over-riding your stylesheet? Is a second stylesheet linked to the topic? Has font properties been added to the table stylesheet (unlikely, I know)?

HTH

[KevinDAmery]

I originally did have

td ul in the css (as opposed to td.ul), which didn't show up in the style editor. It also didn't change the font, but perhaps I just don't get it.

Anyway, it's impossible to format cells without using paragraph tags because the td style class doesn't allow for a hard return, and unless I use a hard return I can't use the ul code. I have to use the ul code because the p.bullet style, or p.cellbullet, produced the actual code in our translated docs.

Do you see any way around this?

I think what I would do is try applying the formatting to the LI tags instead of the UL tag. Actual font and paragraph formatting usually is handled with the LI tags, not the UL tags, so that may be why you didn't get the results you were after. I'm not sure if you would need to do TD LI or TD UL LI as the complex selector, though.

You're right, TDs don't support hard returns--that's because in HTML, if you add another TD it indicates a new table cell. So embedding P tags inside the TD is really the only way it would work.

[livetoski]

td ul li

worked perfectly. Thanks. One down!