CSS: text hidden with text-overflow:ellipses still exists

Question

I have an ul with varying-length li's, but a fixed width. I also have some icons in the li.

<ul>
    <li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
    <li><span class="icon"></span>Short text</li>
    <li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
</ul>

The li's have the text-overflow property set to text-overflow:ellipsis;. But the clipped text that would have been overflowing blocks elements behind it (.icon) from registering the cursor hovering

my CSS:

.icon {
    height:18px;
    width:18px;
    float:right; /*there is a good reason for this, don't complain ;) */
    cursor:pointer;
    background:url(icons.png);
    background-position:-72px -72px;
}
.icon:hover {
    background-position:-90px -72px;
}
li {
    text-overflow:ellipsis;
    height:20px;
    overflow:hidden;
    white-space:nowrap;
    list-style-type:none;
    width:150px;
}

Check my jsfiddle, it explains it a hell of a lot better than I do :p

http://jsfiddle.net/eXXTG/

The overflowing text hidden by text-overflow:ellipses stops the dom from registering the cursor hovering above things that are behind the text (or where the text would be).

Any ideas on fixing this?

Cheeers

Answer 1

You can add

position: relative 

to the .icon class

Answer 2

Just add display block to icon class:

.icon {
    height:18px;
    width:18px;
    background:url(http://www.darkroomart.com/dewolfe/css/images/dw-icons.png);
    float:right;
    /*there is a good reason for this, don't complain ;) */
    cursor:pointer;
    background-position:-72px -72px;
    display: block;
}