I'm unable to come up with a solution to change the vertical alignment of a bullet image alongside the text in an <li> style.
In Flare my bullets are raised above the text as seen below (note the first bullet is custom image that I've added, and it's in a different <ul> set for testing) The image below shows the printed output. The bullets are just a little too high. This is the code:
Code: Select all
<ul class="firstLevel">
<li>first item in the list</li>
</ul>
<ul style="list-style-type: disc;">
<li>second item </li>
<li>third item</li>
</ul>
Code: Select all
ul
{
list-style-type: none;
font-size: 1em;
list-style-image: url('../Images/first_bullet.eps');
}
ul.FirstLevel
{
list-style-type: none;
list-style-image: url('../Images/BulletTSC.png');
vertical-align: middle;
}
li
{
color: #000000;
orphans: 2;
widows: 2;
font-size: 1em;
}
@media print
{
li
{
margin-bottom: 6pt;
margin-top: 6pt;
text-align: left;
orphans: 2;
widows: 2;
line-height: 13px;
font-weight: normal;
color: #363636;
}
}
I remember reading somewhere that Flare doesn't align bullets whilst editing, but my printed output isn't aligned and I've tried:
- adding whitespace to the image (it just gets squashed)
- playing around with margin-top and margin-bottom in my <ul> and <li> styles, but this only affects space above and below the <li>
- vertical-align (has no effect)
Grateful for advice,
Ian