Image position is changing on hover (only on Firefox)

Question

I don't know the reason, but I am facing some problems on firefox.

enter image description here

The flag shoud not move on hover... but only on firefox the flag is changing the position.

enter image description here

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
</head>
<body>
<header>
  <code>
    <span>E</span>xample
  </code>
<div id="language">
  <a href="/en/home"><img alt="England" src="/assets/england-5be6776a259abf9711f460282fb6867b.png" /></a>
  <a href="/br/home"><img alt="Brazil" src="/assets/brazil-e70ce4232fd8b49307a857cb63f6625a.png" /></a>
</div>
</header>
</body>
</html>

CSS

* {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;
}

I have tried to add the below to my css without success.

#language a img:hover {
  text-decoration: none;
  border: none;
}

EDIT

Firefox 18.0.2, Mac OS X V. 10.7.5

Thanks to @KatieK I managed to simulate the problem here: http://jsfiddle.net/sqCuL/2/. I think something else in my css is causing the problem.

There is nothing in the code you've posted that would cause that. This demo: http://jsfiddle.net/KatieK/sqCuL/ shows no movement when I hover the links. Can you provide something which demonstrates the problem? — KatieK, Feb 06 '13 at 22:47
@KatieK I think something else in my css is causing the problem. I paste the full css and the problem appears now here: http://jsfiddle.net/sqCuL/2/ — gabrielhilal, Feb 06 '13 at 23:12

score 2 · Accepted Answer · edited May 23 '17 at 11:56

2

Your code works perfectly fine in latest version of Firefox as stated in the comments. However you could consider using a CSS reset, be it as simple as:

* {
    margin: 0;
    padding: 0;
}

Or more exhaustive as K. Meyer's one (it is just one of many exemples).

EDIT after live demo link:

The faulty CSS is:

nav li a, a:hover, a:visited, a:active, #current
{
    display: block;
}

Which change the way Firefox layout the images during mouse hovering. Not a clue why Firefox is the only one triggering this behaviour thought.

Seems that in Chrome the CSS selector is matched even without hovering with the mouse (probably because of a:visited or a:active) always displaying the two image as block.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 06 '13 at 22:55

Guillaume Algis

10,705
6
44
72

the css reset is in the first line of my css – gabrielhilal Feb 06 '13 at 22:57
I changed the line to `nav li a, nav li a:hover, nav li a:visited, nav li a:active, #current {` and problem solved. Many thanks. – gabrielhilal Feb 06 '13 at 23:26

Image position is changing on hover (only on Firefox)

1 Answers1