CODEWITHSUNDEEP
csshtml-lists
mrtsherman
mrtsherman

Reputation: 39872

HTML unordered list has bullets half obscured

I have an unordered list that shows bullets to the left of each list item. In FF/IE the bullets are half shown. In Chrome they are not shown at all. By adding margin-left: 5px to the <li> I can get them to show up.

But what I really want to understand is WHY they are hidden. I'd rather treat the cause than the symptoms. I couldn't reproduce in a fiddle, so here is a link to the page. I have made it as minimal as possible and provided explanations in the page.

http://help.projectorpsa.com/display/doc432m/Test

I'm using a CMS system called Confluence, so I don't have a lot of control over the html markup. Here is the markup regardless.

<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 &lt;li&gt; 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>

Upvotes: 0

Views: 343

Answers (4)

bilcker
bilcker

Reputation: 1120

If you step up through the html you will see that your <div class="panel"> is set to overflow:hidden;

change that to overflow:visible; and you should be good to go.

Upvotes: 0

Riskbreaker
Riskbreaker

Reputation: 4791

This is the reason custom.css line 33:

table.infoMacro ul {
padding-left: 0px;
}

Try overwriting this

Upvotes: 1

j08691
j08691

Reputation: 207861

Because of this rule:

table.infoMacro ul {
padding-left: 0px;
}

Either get rid of it or increase the padding to like 6px.

Upvotes: 3

DarkAjax
DarkAjax

Reputation: 16223

Try adding list-style-position: inside; to your ul

Upvotes: 0

Related Questions