htmlcsspdfhtml-listsbulletedlist

html - ul/li bullets not aligning when exported to pdf

Misaligned bullets

I have this misalignment in bullets occurring when sending html to pdf format.

It appears to work fine in html. Just not when converted to pdf.

Are there any common reasons why this happens? Any ways to fix it with some additional attributes?

css

  .inclusions {
    position: absolute;
    top: 200px;
  }

html

    <div class="inclusions">
        <p>Experience the combined benefits of massage and the effective results of Moroccan traditions. Your therapist will begin by applying warmed Rhassoul Clay to your back to deeply cleanse and purify the skin. Known as the &ldquo;liquid gold&rdquo; since ancient times, Argan oil is rich in antioxidants that will smooth and tone the skin.</p>
        <ul>
            <li>Decadent Argan oil massage</li>
            <li>Includes scalp massage</li>
            <li>Calming &amp; luxurious</li>
        </ul>
    </div>
Solution

  • The fix had to do with CSS related to the <body>. It was set at position: fixed; when it should have been position: relative;

    In this case I was solving an issue with a Gift Certificate template my business uses.

    I changed the HTML from:

        body {
      position: fixed;
      width: 699px;
      height: 1040px;
    }

    To this:

        body {
      position: relative;
      width: 700px;
      height: 1020px;
    }

    This solved it for me. Hopefully it will help someone out there who comes across same issue with bullet & text alignment on PDF conversions.