Question 228416 in Html Question posted in
Some basic documentation can be found here.

Html – The text goes missing after adding <ul> tag in span

I am a new learner for Html designing email templates. I need to add text in front of a symbol and make sure the text remains aligned for the next line. I am using tag to properly align the text after the symbol. But for some reason it doesn’t seems to be working.

After adding the tag the text is not displaying, it disappears. if i remove

  • the text appears again. I am not sure what is the reason for this behavior. Any help would be very much appreciated. Thanks in advance.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>

 <div class="b opaf v" style=font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%>
                            <table cellpadding=0 style=border:none;vertical-align:top width=100%>
                                <tr>
                                    <td align=left class=x style=font-size:0;word-break:break-word>
                                        <div style=text-align:left>
                                          <p style=margin:0;text-align:left><span style=font-size:12px;font-family:Arial,sans-serif;font-weight:400;color:#54565b;line-height:14px><span style=color:inherit;font-weight:inherit;font-family:inherit;font-size:65%;vertical-align:4px;line-height:0>&sect;</span><span><ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li></ul></span>
                                            </span>
                                           </p>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
  <script src="script.js"></script>
</body>

</html>
    • Tags:

    3

    Answers


    1. 0

      I was thinking some of basic HTML structure is not followed. I believe so this is excepted output.

      <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>

<body>
  <div class="b opaf v" style="font-size: 0; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
    <table cellpadding="0" style="border: none; vertical-align: top; width: 100%;">
      <tr>
        <td align="left" class="x" style="font-size: 0; word-break: break-all;">
          <div style="text-align: left;">
            <ul style="margin: 0; padding-left: 20px; list-style-type: "&sect;;">
              <li style="font-size: 12px; font-family: Arial, sans-serif; font-weight: 400; color: #54565b; line-height: 14px; position: relative;">
                <span style="color: inherit; font-weight: inherit; font-family: inherit; font-size: 65%; vertical-align: 4px; line-height: 0;">&sect;</span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </table>
  </div>
  <script src="script.js"></script>
</body>

</html>
      Login or Signup to reply.
    2. 0

      please don’t use align and more info visit [https://bugzilla.mozilla.org/show_bug.cgi?id=221][1]

      if you remove align from table data tag it may work.

      Login or Signup to reply.
    3. 0

      It’s not actually missing.

      ul tag is a block level element meaning it should do a line break. Therefore text and bullet go to next line and It is not seen because of your styles.

      So, By adding this in your <ul> tag

      style="margin-top:-15px;margin-left:-20px;font-size:10px;"

      It will show the text and the bullet.

      <div class="b opaf v" style=font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%>
  <table cellpadding=0 style=border:none;vertical-align:top width=100%>
      <tr>
        <td align=left class=x style=font-size:0;word-break:break-word>
          <div style=text-align:left>
            <p style=margin:0;text-align:left>
              <span style=font-size:12px;font-family:Arial,sans-serif;font-weight:400;color:#54565b;line-height:14px>
                <span style=color:inherit;font-weight:inherit;font-family:inherit;font-size:65%;vertical-align:4px;line-height:0>
                  &sect;
                </span>
                <span>
                  <ul style="margin-top:-15px;margin-left:-20px;font-size:10px;">
                    <li>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </li>
                  </ul>
                </span>
              </span>
            </p>
          </div>
        </td>
      </tr>
  </table>
</div>
      Login or Signup to reply.
    Please signup or login to give your own answer.

    Back To Top
    Search