Why would an image on a web page get repositioned after a few refreshs?

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/"&gt;&lt;img src="http://www.NinjasLiveClanCodes.com/images/world-war-50.png" />World War</a></li>
        <li><a href="http://imobsterscodes.net/"&gt;&lt;img src="http://www.NinjasLiveClanCodes.com/images/imobsters-codes-50.png" />iMobsters</a></li>
        <li class="first"><a href="http://NinjasLiveClanCodes.com/"&gt;&lt;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

I am using ff 3.6 and it seems to be working fine with it. I would suggest you to clear your cache or reloading the page by pressing Control+F5.

Answer 2

Yes, I can reproduce it (Firefox 3.5.7 on Windows 7).

I don't think it's the word that is the problem. If you look at the World War image in Firebug, one can see that you have given it a margin-top of 45 Pixels. That stays constant, but the three <li> elements start at different heights.

Maybe this is some display: inline-block oddity, I don't know.

Can you try removing all the whitespaces between the <ol> and <li></li> tags in your markup? Including line breaks, so that all of the <ol> is on one line?

Answer 3

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.