Question

I have an ordered list and I used the ‘line-height’ on order to vertically align the icon/bullet I’m using with the text on the right.

The problem now is that when the text is long and breaks in multiple lines it’s too close together and I cannot find a way to fix it.

Here’s the HTML:

<ul class="fancy_list">
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
<li>Value 4</li>
<li>Value 5</li>
</ul>

and here’s the CSS:

.fancy_list {
    padding-left: 15px;
    margin-bottom: 15px;
    }

    .fancy_list li {
    list-style: none;
    padding: 0 0 0 22px;
    margin-top: 5px;
    background: url(http://topgreekgyms.fitnessforum.gr/wp-content/themes/gbs-merchant-dashboard/img/red_sprite.png) -462px -164px repeat-y;
    line-height: 15px;
    height: 30px;
    display:block;
    float: left;
    word-spacing: 0.5px;
    letter-spacing: 0.4px;
    }

Also, here’s a [link] to the page that actually has the issue.

Answer 1

The fix I came up with is the following:

.fancy_list li {
     line-height: 1.5em;
     height: auto;
}

The line-height you were using was in fact too small for what you wanted. “1.5em” should be closer to what you were looking for.

Additionally, the height was set to 30px, which would force the list items to bleed on top of each other when there are two lines.

Hope that helped.