help with indented bullets

straygoat · Post by **straygoat** » Wed Jul 25, 2012 7:52 am

Hello all - I hope someone can help me with this as I'm pulling my hair out, and there's not much there to start with.

I'm trying to create a style sheet and we need bullet lists and number lists with 3 levels of indentation. I thought I had them working fine until I tried to look at the files in Chrome - there were added indents on the bullets that made all the alignment look off. When I built the Flare output, these extra indents also appeared

Can somebody please advise on how to create bullets and num lists that work across browsers?

What we need is:

Bullet List and Number List that align with <P> (left align).
Indent Bullet List and Indent Num List that are indented from the left by 2ems
Another level of both that indent by 4 ems

We also have 'example' versions which are the same, but italic.

They need to have hanging indents so I have kept the default 'outside' setting.

This is what we have in the stylesheet at the moment:

li
{
margin-bottom: 1em;
margin-left: -2em;
margin: 0px;
margin-top: 1em;
list-style-position: outside;
}

ul
{
margin: 0;
margin-bottom: 1em;
margin-top: 1em;
list-style-position: outside;
margin-left: 4em;
}

li.indent1
{
list-style-position: outside;
margin-top: 1.5em;
margin-left: 2em;
}

ol
{
list-style-type: decimal;
margin: 0;
margin-top: 1em;
margin-bottom: 1em;
list-style-position: outside;
margin-left: 4em;
}

li.indent1
{
list-style-position: outside;
margin-top: 1.5em;
margin-left: 2em;
}

li.indent2
{
margin-top: 1.5em;
font-size: 100%;
margin-left: 4em;
}

li.exampleindent1
{
font-style: italic;
margin-top: 1.5em;
margin-left: 2em;
}

li.exampleindent2
{
font-style: italic;
margin-top: 1.5em;
margin-left: 4em;
}

ol.ol_1
{
margin-left: 2em;
}

li.exampleindent1
{
margin-left: 2em;
}

li.exampleindent2
{
margin-left: 4em;
}

What is going wrong? (I'm very much a CSS novice as you can probably tell).

Thanks

crdmerge · Post by **crdmerge** » Wed Jul 25, 2012 8:06 am

You should be setting indents and list styles in the ul/ol, not the li. Here's what we use (two levels only, but you could build out what you need). Note also that we use specific styling inside a Table Style (titled CrdProjectOpenTable.css, at the bottom of the attached code).

Code: Select all

/*== LISTS (AND LISTS IN TABLES) BEGIN ==*/

/* line-height matches that for the p tag */

ul li,
ul ul li,
ul ol li,
ol li,
ol ol li,
ol ul li
{
	margin-top: 4pt;
	margin-bottom: 6pt;
	line-height: 1.2em;
}

/* line-height for lists is less in tables */

td ul li,
td ul ul li,
td ul ol li,
td ol li,
td ol ol li,
td ol ul li
{
	margin-top: 4pt;
	margin-bottom: 4pt;
	color: 595959;
	line-height: 1.1em;
}

ul
{
	list-style-type: square;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 15px;
	margin-left: 15px;
}

ul ul
{
	list-style-type: disc;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 8px;
	margin-left: 8px;
}

ul ol
{
	list-style-type: decimal;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 10px;
	margin-left: 10px;
}

ol
{
	list-style-type: decimal;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 18px;
	margin-left: 18px;
}

ol ol
{
	list-style-type: lower-alpha;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 10px;
	margin-left: 10px;
}

ol ul
{
	list-style-type: square;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 8px;
	margin-left: 8px;
}

td ul
{
	list-style-type: square;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 8px;
	margin-left: 8px;
}

td ul ul
{
	list-style-type: disc;
	padding-left: 7px;
	margin-left: 7px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

td ul ol
{
	list-style-type: decimal;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

td ol
{
	list-style-type: decimal;
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

td ol ol
{
	list-style-type: lower-alpha;
	padding-left: 9px;
	margin-left: 9px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

td ol ul
{
	list-style-type: square;
	padding-left: 8px;
	margin-left: 8px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

td ol li ul li
{
	margin-top: 2px;
	padding-top: 2px;
	margin-bottom: 2px;
	padding-bottom: 2px;
}

.TableStyle-CrdProjectOpenTable .BodyA-Column1-Body1 ul,
.TableStyle-CrdProjectOpenTable .BodyB-Column1-Body1 ul,
.TableStyle-CrdProjectOpenTable .BodyC-Column1-Body1 ul,
.TableStyle-CrdProjectOpenTable .BodyD-Column1-Body1 ul,
.TableStyle-CrdProjectOpenTable .BodyE-Column1-Body1 ul,
.TableStyle-CrdProjectOpenTable .BodyF-Column1-Body1 ul,
.TableStyle-CrdProjectOpenTable .BodyG-Column1-Body1 ul,
.TableStyle-CrdProjectOpenTable .BodyH-Column1-Body1 ul,
.TableStyle-CrdProjectOpenTable .BodyI-Column1-Body1 ul
{
	list-style-type: square;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 15px;
	margin-left: 15px;
}

.TableStyle-CrdProjectOpenTable .BodyA-Column1-Body1 ul ul,
.TableStyle-CrdProjectOpenTable .BodyB-Column1-Body1 ul ul,
.TableStyle-CrdProjectOpenTable .BodyC-Column1-Body1 ul ul,
.TableStyle-CrdProjectOpenTable .BodyD-Column1-Body1 ul ul,
.TableStyle-CrdProjectOpenTable .BodyE-Column1-Body1 ul ul,
.TableStyle-CrdProjectOpenTable .BodyF-Column1-Body1 ul ul,
.TableStyle-CrdProjectOpenTable .BodyG-Column1-Body1 ul ul,
.TableStyle-CrdProjectOpenTable .BodyH-Column1-Body1 ul ul,
.TableStyle-CrdProjectOpenTable .BodyI-Column1-Body1 ul ul
{
	list-style-type: disc;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 7px;
	margin-left: 7px;
}

.TableStyle-CrdProjectOpenTable .BodyA-Column1-Body1 p,
.TableStyle-CrdProjectOpenTable .BodyB-Column1-Body1 p,
.TableStyle-CrdProjectOpenTable .BodyC-Column1-Body1 p,
.TableStyle-CrdProjectOpenTable .BodyD-Column1-Body1 p,
.TableStyle-CrdProjectOpenTable .BodyE-Column1-Body1 p,
.TableStyle-CrdProjectOpenTable .BodyF-Column1-Body1 p,
.TableStyle-CrdProjectOpenTable .BodyG-Column1-Body1 p,
.TableStyle-CrdProjectOpenTable .BodyH-Column1-Body1 p,
.TableStyle-CrdProjectOpenTable .BodyI-Column1-Body1 p
{
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 0px;
	margin-left: 0px;
}

/*== LISTS (AND LISTS IN TABLES) END ==*/

straygoat · Post by **straygoat** » Thu Jul 26, 2012 12:04 am

Thanks. I'll give that a go now. I'm taking it that ol ol ol would be a third level number list, td ol ul is a second level bullet list within a first level number list inside a table row etc.? Or am I misunderstanding that?

straygoat · Post by **straygoat** » Thu Jul 26, 2012 1:27 am

I think the li indent has been added to solve the problem with aligning 2 digit numbers with the text, so a number list appears like this:

Paragraph text is left aligned.

1. list item
2. list item
3. list item
4. list item
5. list item
6. list item
7. list item
8. list item
9. list item. The words need to wrap like
this, so the style is outside.
10. list item

So I'm stuck again

straygoat · Post by **straygoat** » Thu Jul 26, 2012 4:12 am

Just noticed that the spacing didn't work - the wrap should have the text going in line with the text of the previous point, not going under the numbers.

kwag_myers · Post by **kwag_myers** » Thu Jul 26, 2012 5:09 am

I'm looking at some of my code where I have nested bullet lists and I noticed my stylesheet doesn't have margin-left values:

Code: Select all

<ul>
    <li value="1">Some really awesome text.</li>
    <li value="2">The following features have been added:
        <ul class="sublist">
           <li value="1">Not so awesome text, more like intriguing.</li>
           <li value="2">I'm almost done.</li>
        </ul>
    </li>
    <li value="3">Okay, that's all I got.</li>
</ul>

My sublist class just has a top and bottom margin:

Code: Select all

ul.sublist
{
	margin-bottom: 1em;
	margin-top: 1em;
}

Maybe you're over-coding your stylesheet? Did you try nesting your lists?

straygoat · Post by **straygoat** » Thu Jul 26, 2012 7:31 am

Overcoding (and imbecilic coding) is very likely!

I've somehow managed to get it so that the online output looks terrible while in flare (bullets and numbers way off the left-hand side of the page) BUT it builds pretty much how we want it. It's just that it would be really tricky to work with it in Flare that way. If I switch Flare to default, it is nicer to look at in Flare, but building from that set of styles creates a help with indents that are far too big. I'm obviously doing something very wrong here...but I'm not sure what. It seems that if I set the padding and margin-left to 0, the bullets and numbers are indented too much.

I've included the stylesheet as it stands - the default stuff is a bit of a mess, but the online part doesn't seem too far off - the output looks more or less right with it. Any advice on where I'm going wrong would be appreciated!!

Code: Select all


/*<meta />*/

/* BODY */

/* HYPERLINKS */

/* LISTS */

/* PREFORMATTING/CODE */

/* TABLES */

body
{
	background: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
}

body.home
{
	text-align: center;
	font-size: 100%;
}

h6.footer a:link
{
	color: #6666cc;
}

h6.footer a:active
{
	color: #6666cc;
}

h6.footer a:visited
{
	color: #cc66cc;
}

ol
{
	font-size: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	list-style-position: outside;
	margin-left: 4em;
}

/* PARAGRAPH */

ul
{
	font-size: 100%;
	margin-top: .5em;
	margin-bottom: 0em;
	margin-left: 4em;
}

ol ul
{
	list-style: disc;
	margin-top: .5em;
}

ul ul
{
	list-style: disc;
	margin-top: .5em;
}

li
{
	margin-bottom: .7em;
	margin-left: -2em;
	margin-top: 1em;
}

li.indent1
{
	margin-left: 0em;
}

li.indent2
{
	margin-left: 0em;
}

li.example
{
	font-style: italic;
}

pre
{
	font-size: 100%;
	margin-top: 1.2em;
	margin-bottom: 1.5em;
}

pre.computercode
{
	font-size: 100%;
	margin-top: 1.2em;
	margin-bottom: 1.5em;
	font-family: Monospace, Courier New, Courier;
}

code
{
	font-family: Monospace, Courier New, Courier;
}

code.indent1
{
	margin-left: 2em;
}

code.indent2
{
	margin-left: 4em;
}

code.indent3
{
	margin-left: 6em;
}

table
{
	font-size: 100%;
	margin-left: 2em;
	margin-top: 1em;
	margin-bottom: 1em;
	border: 1px solid Black;
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	word-wrap: break-word;
}

th
{
	text-align: center;
	margin: .25em;
	vertical-align: middle;
	border: 1px solid Black;
	padding: 0px 4px 0px 4px;
}

tr
{
	vertical-align: top;
	border: 1px solid Black;
	padding: 0px 4px 0px 4px;
}

td
{
	margin: .25em;
	vertical-align: top;
	border: 1px solid Black;
	padding: 0px 4px 0px 4px;
}

table.danger th
{
	background-color: Red;
	color: White;
	font-size: 200%;
}

table.warning th
{
	background-color: #ffc000;
	font-size: 200%;
}

/* HEADING */

table.caution th
{
	background-color: Yellow;
	font-size: 200%;
}

table.danger td
{
	border: 0px hidden White;
}

table.warning td
{
	border: 0px hidden White;
}

table.caution td
{
	border: 0px hidden White;
}

p
{
	font-size: 100%;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

p.indent1
{
	margin-left: 2.5em;
}

/* IMAGES */

p.indent2
{
	margin-left: 4.50em;
}

/* SPAN */

p.indent3
{
	margin-left: 6em;
}

/* RULES */

p.note
{
	background-color: #80FF80;
	font-style: italic;
}

p.noteindent1
{
	background-color: #80FF80;
	margin-left: 2em;
	font-style: italic;
}

p.noteindent2
{
	background-color: #80FF80;
	margin-left: 4em;
	font-style: italic;
}

p.caution
{
	background-color: Yellow;
	font-style: italic;
}

p.cautionindent1
{
	background-color: Yellow;
	margin-left: 2em;
	font-style: italic;
}

p.cautionindent2
{
	background-color: Yellow;
	margin-left: 4em;
	font-style: italic;
}

p.warning
{
	background-color: Red;
	color: White;
	font-style: italic;
}

p.warningindent1
{
	background-color: Red;
	color: White;
	margin-left: 2em;
	font-style: italic;
}

p.type
{
	text-transform: uppercase;
	font-size: 115%;
}

p.centered
{
	text-align: center;
}

p.small
{
	font-size: 80%;
}

p.italic
{
	font-style: italic;
}

p.example
{
	font-style: italic;
}

p.exampleindent1
{
	margin-left: 2em;
	font-style: italic;
}

p.exampleindent2
{
	margin-left: 4em;
	font-style: italic;
}

h1
{
	font-size: 125%;
	margin-bottom: .5em;
}

h2
{
	font-size: 125%;
	margin-bottom: .5em;
}

h3
{
	font-size: 115%;
	margin-top: 1.2em;
	margin-bottom: .5em;
	font-weight: bold;
}

h4
{
	font-size: 105%;
	margin-top: 1.2em;
	font-weight: bold;
	font-style: italic;
}

h5
{
	font-size: 100%;
	margin-top: 1.2em;
	font-weight: bold;
}

h6.footer
{
	text-align: center;
}

img.figure
{
	margin-left: 2em;
	margin-top: 4mm;
	margin-bottom: 4mm;
}

span.super
{
	vertical-align: super;
	font-size: 50%;
}

hr.footer
{
	color: #0000CA;
	text-align: center;
	width: 80%;
	margin-top: 5mm;
}

img.img_1
{
	position: absolute;
	left: ;
	top: ;
}

div.div_1
{
	position: absolute;
	left: ;
	top: ;
}

div.div_2
{
	position: relative;
	left: ;
	top: ;
}

ol.ol_1
{
	list-style-type: lower-roman;
}

@media non-print
{
	h1
	{
		color: #228b22;
		font-size: 200%;
	}

	h2
	{
		color: #228b22;
		font-size: 150%;
	}

	h3
	{
		color: #228b22;
		font-size: 125%;
	}

	h4
	{
		color: #228b22;
	}

	h6.footer
	{
		color: #228b22;
	}

	li
	{
		margin-top: 1em;
		margin-bottom: 1em;
		margin-left: -2em;
	}

	ul
	{
		font-size: 100%;
		margin-top: .5em;
		margin-bottom: 0em;
		margin-left: 0em;
	}

	li.indent1
	{
		margin-left: 0em;
	}

	ol
	{
		font-size: 100%;
		margin-top: 1em;
		margin-bottom: 1em;
		list-style-position: outside;
		margin-left: 0em;
	}

	p.indent2
	{
		font-size: 100%;
		margin-left: 3em;
	}

	p.indent1
	{
		font-size: 100%;
		margin-left: 1.5em;
	}

	li.indent2
	{
		margin-left: 0em;
	}

	p.indent3
	{
		font-size: 100%;
		margin-top: 1em;
		margin-bottom: 1em;
		margin-left: 4.5em;
	}

	p
	{
		margin: 0;
		margin-bottom: 1.5em;
		margin-top: 1.5em;
		font-size: 100%;
		font-family: Verdana;
		line-height: 1.5em;
	}

	body
	{
		line-height: 1.5em;
		margin-left: 20px;
	}

	p.warningindent2
	{
		margin-left: 4.00em;
	}

	li.exampleindent1
	{
		font-style: italic;
		margin-left: 0.2em;
		margin-top: 1.5em;
	}

	li.exampleindent2
	{
		font-style: italic;
		margin-left: 2.2em;
		margin-top: 1.5em;
	}

	p.Cell_WARNING
	{
		margin-bottom: 2em;
		font-size: 150%;
	}

	p.Cell_DANGER
	{
		font-size: 150%;
	}

	p.Cell_CAUTION
	{
		font-size: 150%;
	}

	table
	{
		table-layout: fixed;
	}

	th
	{
		font-size: 150%;
	}

	hr
	{
		color: #03aa58;
	}

	hr.FooterLine
	{
		border: none 0px;
		width: 80%;
		background-color: #03aa58;
		height: 2px;
	}

	ol ol
	{
		
	}

	ol ol ol
	{
		margin-left: 2.5em;
	}

	p.Indent
	{
		margin-left: 2em;
	}

	ul ul
	{
		
	}

	ul ul ul
	{
		
	}

	ul ol
	{
		margin-left: 3em;
		list-style-position: outside;
	}

	ol ul
	{
		
	}
}

p.warningindent2
{
	background-color: Red;
	color: White;
	margin-left: 2em;
	font-style: italic;
}

li.exampleindent1
{
	margin-left: 2em;
	font-style: italic;
}

li.exampleindent2
{
	margin-left: 4em;
	font-style: italic;
}

@media print
{
	h1
	{
		font-weight: normal;
		font-size: 16pt;
		font-family: 'HelveticaNeue LT 75 Bold';
	}

	h2
	{
		font-family: 'HelveticaNeue LT 75 Bold';
		font-size: 14pt;
		font-weight: normal;
	}

	h3
	{
		font-family: 'HelveticaNeue LT 75 Bold';
		font-size: 12pt;
		font-weight: normal;
		margin-left: 2.1cm;
	}

	h4
	{
		font-size: 12pt;
		font-family: 'HelveticaNeue LT 75 Bold';
		font-weight: normal;
		margin-left: 2.1cm;
	}

	p
	{
		font-family: 'HelveticaNeue LT 55 Roman';
		text-align: left;
		margin-left: 2.1cm;
		margin-right: 0.35cm;
		margin-top: 6pt;
		margin-bottom: 10pt;
		font-size: 10pt;
		line-height: 12pt;
	}

	p.indent1
	{
		margin-left: 2.8cm;
	}

	p.caution
	{
		margin-left: 2.1cm;
		margin-right: 0.0508cm;
		border-bottom-style: double;
		border-top-style: double;
		font-family: 'HelveticaNeue LT 56 Italic';
	}

	p.cautionindent1
	{
		font-family: 'HelveticaNeue LT 56 Italic';
		margin-left: 2.8cm;
		margin-right: 0.0508cm;
		border-top-style: double;
		border-bottom-style: double;
	}

	p.Cell_WARNING
	{
		font-size: 16pt;
	}
}

@media print
{
	.Caution
	{
		text-align: left;
		margin-left: 2.1cm;
		margin-right: 0.0508cm;
		margin-top: 4pt;
		margin-bottom: 10pt;
		font-family: 'HelveticaNeue LT 56 Italic';
		font-weight: normal;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.CautionIndent1
	{
		text-align: left;
		margin-left: 2.8cm;
		margin-right: 0.0508cm;
		margin-top: 4pt;
		margin-bottom: 10pt;
		font-family: 'HelveticaNeue LT 56 Italic';
		font-weight: normal;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.CautionIndent2
	{
		text-align: left;
		margin-left: 3.4cm;
		margin-right: 0cm;
		margin-top: 4pt;
		margin-bottom: 10pt;
		font-family: 'HelveticaNeue LT 56 Italic';
		font-weight: normal;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.Example
	{
		text-align: left;
		margin-left: 2.1cm;
		margin-right: 0cm;
		margin-top: 4pt;
		margin-bottom: 10pt;
		font-family: 'HelveticaNeue LT 56 Italic';
		font-weight: bold;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.ExampleIndent1
	{
		text-align: left;
		margin-left: 2.8cm;
		margin-right: 0cm;
		margin-top: 4pt;
		margin-bottom: 10pt;
		font-family: 'HelveticaNeue LT 56 Italic';
		font-weight: bold;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.ExampleIndent2
	{
		text-align: left;
		margin-left: 3.4cm;
		margin-right: 0cm;
		margin-top: 2pt;
		margin-bottom: 6pt;
		font-family: 'HelveticaNeue LT 56 Italic';
		font-weight: normal;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.Indent
	{
		text-align: left;
		margin-left: 2.8cm;
		margin-right: 0cm;
		margin-top: 0pt;
		margin-bottom: 3pt;
		font-family: 'HelveticaNeue LT 55 Roman';
		font-weight: bold;
		font-style: normal;
		font-size: 11pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 13pt;
		text-decoration: none;
	}

	p.Indent2
	{
		text-align: left;
		margin-left: 3.4cm;
		margin-right: 0cm;
		margin-top: 2pt;
		margin-bottom: 6pt;
		font-family: 'HelveticaNeue LT 55 Roman';
		font-weight: normal;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.Indent3
	{
		text-align: left;
		margin-left: 4.1cm;
		margin-right: 0cm;
		margin-top: 3pt;
		margin-bottom: 3pt;
		font-family: 'HelveticaNeue LT 55 Roman';
		font-weight: normal;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.Note
	{
		text-align: left;
		margin-left: 2.1cm;
		margin-right: 0cm;
		margin-top: 4pt;
		margin-bottom: 10pt;
		font-family: 'HelveticaNeue LT 56 Italic';
		font-weight: normal;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.NoteIndent1
	{
		text-align: left;
		margin-left: 2.8cm;
		margin-right: 0.0508cm;
		margin-top: 4pt;
		margin-bottom: 10pt;
		font-family: 'HelveticaNeue LT 56 Italic';
		font-weight: normal;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.NoteIndent2
	{
		text-align: left;
		margin-left: 3.4cm;
		margin-right: 0cm;
		margin-top: 4pt;
		margin-bottom: 10pt;
		font-family: 'HelveticaNeue LT 56 Italic';
		font-weight: normal;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.Warning
	{
		text-align: left;
		margin-left: 2.1cm;
		margin-right: 0cm;
		margin-top: 4pt;
		margin-bottom: 10pt;
		font-family: 'HelveticaNeue LT 56 Italic';
		font-weight: normal;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	p.WarningIndent1
	{
		text-align: left;
		margin-left: 2.8cm;
		margin-right: 0.0508cm;
		margin-top: 4pt;
		margin-bottom: 10pt;
		font-family: 'HelveticaNeue LT 56 Italic';
		font-weight: normal;
		font-style: normal;
		font-size: 10pt;
		letter-spacing: 0em;
		color: #000000;
		mc-hyphenate: never;
		text-indent: 0px;
		line-height: 12pt;
		text-decoration: none;
	}

	pre.code
	{
		font-family: Monospace, Courier New, Courier;
	}

	ol
	{
		margin-left: 2.8cm;
		margin-top: 1em;
		margin-bottom: 1em;
	}

	ul
	{
		font-size: 100%;
		margin-top: .5em;
		margin-bottom: 0em;
		margin-left: 2.8cm;
	}

	li
	{
		margin-bottom: .7em;
		margin-left: 2.8cm;
	}

	li.indent1
	{
		margin-left: 3.4cm;
	}

	li.indent2
	{
		margin-left: 4.1cm;
	}

	li.example
	{
		font-style: italic;
	}
}

p.Cell_WARNING
{
	
}

p.Cell_DANGER
{
	
}

p.Cell_CAUTION
{
	
}

a:link
{
	color: #0000cc;
}

a:visited
{
	color: #990099;
}

a:active
{
	color: #0000cc;
}

Post by **LTinker68** » Thu Jul 26, 2012 7:37 am

straygoat wrote:It seems that if I set the padding and margin-left to 0, the bullets and numbers are indented too much.

I only glanced through your styles, but I noticed you had a margin-left of 4em on the ol tag, I think it was, and a negative left margin on an li tag. That might be part of the problem.

And honestly, in this situation where you've done a lot of fiddling with the styles, it might just be easier to make a backup of the stylesheet, then open the original one in the Internal Text Editor and delete all the list-related styles. That will get you back to the default styling for lists. Build the output and see how it looks. Then you can start modifying one style at a time and rebuilding until you get it the way you want. If your project is large, you can do the same in a new test project -- once you have the lists appearing the way you want, copy-and-paste the styles from the test project into the real project.

kwag_myers · Post by **kwag_myers** » Thu Jul 26, 2012 8:18 am

Another option is to comment-out styles instead of setting them to zero. Take everything out relating to lists and follow LTinker68's advice by removing the comments of each style systematically. I would start with the <ul> and <ol> styles and leave the <li> related styles for last. If you're editing outside of Flare, i.e., using NotePad, you can refresh (F5) your browser to see your changes without having to Build. Just be sure to Save your revisions each time.

Note: In CSS, a comment opens with slash-asterisk (/*) and closes with the reverse (*/). Look in the top part of your stylesheet and you'll see several comments: /*<metadata />*/, /* BODY */, etc.

straygoat · Post by **straygoat** » Thu Jul 26, 2012 3:37 pm

Thanks, I'll start a new project tomorrow and see how i get on.

MadCap Software Forums

help with indented bullets

help with indented bullets

Re: help with indented bullets

Re: help with indented bullets

Re: help with indented bullets

Re: help with indented bullets

Re: help with indented bullets

Re: help with indented bullets

Re: help with indented bullets

Re: help with indented bullets

Re: help with indented bullets