My unordered list is experiencing issues with displaying bullets correctly. In Firefox and Internet Explorer, the bullets are only partially shown, while in Chrome they are not visible at all. Adding margin-left: 5px to the <li> element resolves this problem, but I am more interested in understanding why it is happening in the first place. Here is a minimal example on a page where you can see the issue firsthand:
I am using a CMS system called Confluence, which limits my control over the HTML markup. Here is the relevant markup:
<div class="panelMacro">
<table class="infoMacro">
<tbody>
<tr>
<td>
<div class="panel" style="background-color: transparent;border-color: transparent;border-width: 1px;">
<div class="panelContent" style="background-color: transparent;">
<ul>
<li>A - There is no bullet displayed for this list. If I add margin-left: 6px to this <li> then I can see it. But I don't understand why this is happening. What is the bullet hiding behind?</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>