CODEWITHSUNDEEP
htmlcssfirefoxhtml-lists
RhymeGuy
RhymeGuy

Reputation: 2112

Why is there a space on top of unordered list items?

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/

Upvotes: 3

Views: 1977

Answers (2)

BoltClock
BoltClock

Reputation: 723508

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

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.

Upvotes: 4

symlink
symlink

Reputation: 12209

h3 elements display as block elements. This means they take up the whole width of the browser window, with a space above and below them. You need to change your h3 tags to display as inline elements so they don't break the flow of the document. You can change a block element to an inline element like this:

CSS:

  h3{
      display:inline;
  }

Here's the updated jsFiddle

Upvotes: -1

Related Questions