Question

So I discovered this weird bug, it’s so odd and I can’t understand why is it doing this. I am using Firefox 3.5.7. It’s not happening in Internet Explorer 8 though. So if you visit this website: http://www.ninjasliveclancodes.com/ and look at top right where it says “World War” and pay attention to it because after you refresh a few times you should see it’s icon picture move down a little bit closing the gap between the picture and the word “World War”. I found out they would all react this way if there was a space within the word. Anyone know why is it doing this? Also, how can I stop it from doing that by either eliminating the gap or have it stay?

Edit:
Either way, I would still like to know how can I close in the gap between icon and word. It looks exactly the way I want it in IE8, however, I can’t reproduce that in Firefox 3.5.7

    <ol>
        <li><a href="http://www.worldwaralliancecodes.net/"><img src="http://www.NinjasLiveClanCodes.com/images/world-war-50.png" />World War</a></li>
        <li><a href="http://imobsterscodes.net/"><img src="http://www.NinjasLiveClanCodes.com/images/imobsters-codes-50.png" />iMobsters</a></li>
        <li class="first"><a href="http://NinjasLiveClanCodes.com/"><img src="http://www.NinjasLiveClanCodes.com/images/ninjas-live.png" />Ninjas</a></li>
    </ol>

Edit2:
Line-height allowed me to close in the gap. However, does anyone know a way around it?

Answer 1

It looks like you caught a rendering problem in Firefox. When you click the link, the extra spacing appears.

Try to set line-height on the #nav ol li style to override the default line height of the list.