Question

PROBLEM: There is a space on top of unordered list items. This space appears in Firefox 18.0.1

HTML:

<ul>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>

CSS:

ul {
    list-style: square;
    margin-left: 20px
}

WORKING DEMO: http://jsfiddle.net/vpdd7/

Answer 1

This seems to be an issue with list styles clashing with inline elements preceding/containing block elements such as h3 and p. This issue does not occur if you

• set ul to list-style-type: none

• set li to anything other than display: list-item

• set a to display: block

• remove the a element altogether

• set h3 to anything other than display: block

I can’t find anything in the CSS2.1 spec that would determine whether this behavior is a bug in Firefox, or a bug in other browsers. In fact, under list-style-position, it says that the exact position or layout of the marker box (containing the bullet) is undefined, even with respect to the box that’s created by the li element itself (the principal box) or any of its children.

Given your situation, the third option may be the best workaround that wouldn’t compromise the layout much, if at all. If you’re going to turn the entire contents of the list item into a link anyway, you may as well display it as a block. That way everything is safely contained in a block box, whose rendering is very clearly-defined and completely reliable.