CSS: overlay looks fine on Chrome, but not in Firefox 3: how do I fix the vertical offset?

http://ttt-ai.heroku.com/

If you get to game over screen (开发者_Python百科its tic tac toe, so it won't take long), in chrome, the overlay fits the board. But in Firefox 3, the overlay is shifted down a few pixels.

How can I change my CSS to be more consistent?

You are positioning .overlay_container with lots of trickery (negative margins), you should put it inside .board, which has position absolute, and then add:

.overlay_container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

This ensures that the position matches all browsers, and if the board size changes the overlay will adapt to it.

Here is a demo stripped to the bare minimum http://jsfiddle.net/duopixel/qYejG/