Bulleted Lists inside Table Cells

[Purple Helen]

Hi - newbie here so please be gentle!

I'm trying to figure out how to put a bulleted list inside a table cell.

If I do the obvious (create a few paragraphs them Format>List>Bullet list) - it messes up the column width, which becomes much wider than intended.

If I insert a "fake" gap between bits of text with Shift>Return then Format>List>Bullet list only the first block of text has a bullet by it.

Am I being dense, or is it not possible to simply format the text in a cell into a bulleted list? I've seen forum entries about this in Flare 6 but they seemed to indicate it would be fixed in Flare 7 - but I can't find anything in the help files.

I am not looking to mess with the Table Style as I am not the project owner, I am simply asked to copy-edit the content.

All suggestions gratefully received!

Thanks, Helen

[lacastle]

Most likely, the formatting applied in your CSS to ul or li are adding the weird margins. however, if you adjust the default ul/li styles, it will apply to every list in your project. you are better off making a class for the li with the appropriate margins and applying that to the text in your table. also remember that the table cell margins/borders will have an effect on the text inside the cell as well.

by the way, are you just a newbie to Flare, or to CSS too? if CSS, i definitely recommend finding some tutorials so you can learn the basics of making and applying and editing classes, styles, etc.

[LTinker68]

Or, instead of a custom ul/ol or li class, you add a complex selector to your stylesheet. You have to manually open the stylesheet file in the Internal Text Editor and add the complex selector, but once you've added it, you can later modify it via the Stylesheet Editor. Anyway, the complex selector would look something like this:

Code: Select all

td ol,
td ul
{
   margin-left:0;
}

The complex selector, in this case, says that if a list appears inside a table cell, then set the list's left margin to 0, instead of the default or specified value for lists used outside of tables. You'll probably want to adjust that value since I think the browsers might treat a margin of 0 on a list differently between the browsers, so you might have to settle for a left margin of like 2px or something, but test it and see.

[Purple Helen]

Thanks Laura and Lisa - yes I'm a newbie in anything to do with webpages!!

I normally just work in Microsoft Word, so editing in Flare is something of a minefield to say the least!

I don't want to start altering classes/styles at all if I can help it - (my role is as a proofreader/copy editor not a techie and I daren't risk messing up the rest of the website!) - so I was hoping there was a simple way to achieve bullets inside a table cell.

My own solution so far is to put a bullet symbol at the start of the sentence, then force a line space with shift>return, then the same again.

Obviously that doesn't wrap properly, hence my request, but maybe I just have to live with it.

Thanks for the suggestions anyway, I appreciate your time.

Helen.

[paintedturtle]

Or, instead of a custom ul/ol or li class, you add a complex selector to your stylesheet. You have to manually open the stylesheet file in the Internal Text Editor and add the complex selector, but once you've added it, you can later modify it via the Stylesheet Editor. Anyway, the complex selector would look something like this:

Code: Select all

td ol,
td ul
{
   margin-left:0;
}

The complex selector, in this case, says that if a list appears inside a table cell, then set the list's left margin to 0, instead of the default or specified value for lists used outside of tables. You'll probably want to adjust that value since I think the browsers might treat a margin of 0 on a list differently between the browsers, so you might have to settle for a left margin of like 2px or something, but test it and see.

Thanks for this, Lisa! Found it years later but it solves the problem I've been having of all my unordered lists in table cells being way far off. Adding that to the CSS (and in my case, 18px for the margin) fixed everything!

[cayennep]

not working for me - not sure if it needs to be added somewhere in particular, nor how you'd see it as 'available' but doesn't seem to help

[Psider]

If by "available" you mean to see how it's configured in the Flare stylesheet editor, then I believe it should show up in the Advanced view under All Styles > (Complex Selectors).

If you mean how to tell if a style is being applied, then I'll quite often set a hideous background-color or font color, just to see what changes.

[cayennep]

If by "available" you mean to see how it's configured in the Flare stylesheet editor, then I believe it should show up in the Advanced view under All Styles > (Complex Selectors).

If you mean how to tell if a style is being applied, then I'll quite often set a hideous background-color or font color, just to see what changes.

I mean I don’t see it in the list of styles to select from, and it doesn’t ‘just work’. I added it to the stylesheet but not sure if it needs to be somewhere in particular. It made no difference, anyway.

I know I’ve done this before but nothing I’m doing has any impact, and I’ve spent quite a lot of time on it already.

The lists inside table cells are indented A LOT - the other, non-list text, is not indented at all. Something seems to be overriding, but looking up the hierarchy I don’t see any settings for any of the usual suspects (ul, li, td, etc)

Still looking for clues, any help appreciated.

[Psider]

You wouldn't select a style to apply in this case; just using the bullet or number buttons inside a table cell should "apply" it automatically (by creating the OL or UL tag).

If you put the style at the top of your stylesheet, there might be another definition lower in the file that will take precedence. So if it's at the top, try moving it to the end. If that changes things, you know you have another definition somewhere in the file that you need to change.

Also, to check that the css is being applied, you can try adding a ghastly background color. This will usually confirm that there isn't a syntax error somewhere (such as a missing semi-colon or mistyped property) e.g.

td ol,
td ul
{
margin-left:0;
background-color: pink;
}

[cayennep]

Brilliant, thanks so much!!
Back to this tomorrow, great tips to try. Driving me a bit mad, and your suggestions could be useful for other times I can’t figure out what’s overriding too - tho this is a first (and last, I hope).

Thanks again