title: Image position is changing on hover (only on Firefox)
body: <p>I don't know the reason, but I am facing some problems on firefox.</p>
  
  <p><img src="https://i.stack.imgur.com/YMGXm.png" alt="enter image description here"></p>
  
  <p>The flag shoud not move on hover... but only on firefox the flag is changing the position.</p>
  
  <p><img src="https://i.stack.imgur.com/boxqg.png" alt="enter image description here"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
    &lt;code&gt;
      &lt;span&gt;E&lt;/span&gt;xample
    &lt;/code&gt;
  &lt;div id="language"&gt;
    &lt;a href="/en/home"&gt;&lt;img alt="England" src="/assets/england-5be6776a259abf9711f460282fb6867b.png" /&gt;&lt;/a&gt;
    &lt;a href="/br/home"&gt;&lt;img alt="Brazil" src="/assets/brazil-e70ce4232fd8b49307a857cb63f6625a.png" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* {margin: 0; padding: 0;}
  
  body {
    background: #f2f2f2;
    font: Verdana,Arial,Helvetica,Sans-Serif;
  }
  
  header {
    width: 100%;
    height: 80px;
    background: #333333;
    color: #f5f5f5;
    font-size: 2em;
  }
  
  header span {
    font-size: 2.5em;
  }
  
  code {
  float: left;
  }
  
  #language {
    float: right;
  }
  
  #language a img{
    height: 25px;
  }
  </code></pre>
  
  <p>I have tried to add the below to my css without success.</p>
  
  <pre><code>#language a img:hover {
    text-decoration: none;
    border: none;
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>Firefox 18.0.2, Mac OS X V. 10.7.5</p>
  
  <p>Thanks to @KatieK I managed to simulate the problem here: <a href="http://jsfiddle.net/sqCuL/2/" rel="nofollow noreferrer">http://jsfiddle.net/sqCuL/2/</a>. I think something else in my css is causing the problem.</p>