Hello All,
I'm having a problem getting bulleted lists in a Snippet to have the correct left margin when they are rendered. This happens in FF, but not IE.
The Sniipet looks like this:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="topic-comment" content="" />
<meta name="generator" content="Adobe RoboHelp 8" />
<title>Common_Fields</title>
</head>
<body>
<span style="font-weight: bold;">ID</span> (Read only) This is a unique
identifier automatically assigned when a new record is created.
<li class="BulletLvl1"><span style="font-weight: bold;">Name</span> A name
to identifying the record, up to 50 characters in length. This name is
used in other areas of the application where records of this type can
be selected. This field is required.</li>
<li class="BulletLvl1"><span style="font-weight: bold;">External ID</span>
This field can be used to correlate to other systems that may not use
the same ID as used in Enterprise.</li>
<li class="BulletLvl1"><span style="font-weight: bold;">Description</span>
A text description of the record. </li>
</body>
</html>
It's inserted in the text like this:
<ul>
<li class="BulletLvl1"><?rh-placeholder type="snippet" ref="Common_Fields" ?></li>
<li class="BulletLvl1"><?rh-placeholder type="snippet" ref="Active" ?></li>
<li class="BulletLvl1"><span style="font-weight: bold;">Recipe Item</span>
Indicates that the item is used as a recipe item.</li>
<li class="BulletLvl1"><span style="font-weight: bold;">Inventoried</span>
Indicates that the item is counted in inventory counts. Since menu, ...
The CSS for the bullet list looks like this:
li.BulletLvl1 {
list-style: url("smallorange.jpg");
margin-top: 5pt;
margin-left: -8pt;
}
And it looks like this:
Anyone know how to deal with this?
1 Correct answer
Hi,
As far as I can see, you insert the snippet with the bullets inside an existing list. You've anticipated this by not adding the list tag for the first item. I suspect howereve that RH still creates a multilevel lists. On the first level, the li is indented -8pt and this is the same for the second level, resulting in a total of -16pt. Firefox is doing it right 
Try adding the following to your css:
li.BulletLvl1 li {margin-left:0;}
This will set the left margin of every list item inside a list it
...
2
Replies
Hi,
As far as I can see, you insert the snippet with the bullets inside an existing list. You've anticipated this by not adding the list tag for the first item. I suspect howereve that RH still creates a multilevel lists. On the first level, the li is indented -8pt and this is the same for the second level, resulting in a total of -16pt. Firefox is doing it right 
Try adding the following to your css:
li.BulletLvl1 li {margin-left:0;}
This will set the left margin of every list item inside a list item BulletLvl1 to have a left margin of left. Please test with this, because it will target all multilevel lists inside BulletLvl1.
If this doesn't work, please post an example output topic so I can have a look.
AdChoices