Question

When I hover an item in a list and the list text contains a linebreak, the hover effect seems to be inconsistent.

<ul id="nav1" class="greenbullet">
    <li>
        <a href="" class="tsize">Surdite : en Europe, 40 <br />millions de personnes sont concernees</a>
    </li>
    <li>
        <a href="" class="tsize">GuideCaro, une entreprise pionniere, partenaire de Garnier</a>
    </li>
    <li>
        <a href="" class="tsize">Garnier renforce son accessibilite en lancant le service Sourdline </a>
    </li>
</ul>

The css

#nav1 { list-style:url(../../img/02-tri-SDB-light/images/greenbullet.png) }

#nav1 li a { text-decoration:none;color:#019b99 }

#nav1 li { margin-left:40px }

#nav1 li:hover, #nav1 li:hover a { list-style:url(../../img/02-    tri-SDB-light/images/puce2.png); color:#FFF;background-color:#019b99; }

How do I sort this out?

Answer 1

I’ve created a fiddle and can’t see the problem.

http://jsfiddle.net/jasongennaro/V654e/

However, we can’t see your list-style because they are images. So the problem may be there, specifically with the :hover style. There appears to be a break in the url after the 02?

#nav1 li:hover, #nav1 li:hover a { list-style:url(../../img/02- tri-SDB-light/images/puce2.png); color:#FFF;background-color:#019b99; }