Question

In chrome (note the stats are shown properly in the gray box (bottom left corner))

However in fire-fox, the stats are positioned way below the box (bottom half hidden)

My CSS code is as follows

.stats_section {
  position: relative;
  opacity: 0.7;
  height: 20px;
  margin-top: -31px;
  margin-left: 76px;
  margin-bottom: 10px;
  width: 24%;
}

How can I fix the CSS so that it works for both browsers?

Answer 1

Relative positioning can sometimes be pretty tricky so in this case I would definitely go with absolute positioning inside a container with explicitly set positioning.

For that you would need to set explicit positioning for the parent container containing .stats_section (relative would probably be fine in this case but if its already set to absolute it will also work).

.parent_container {
    position:relative;
}

.stats_section {
   position: absolute;
   opacity: 0.7;
   height: 20px;
   bottom: -22px;
   left: 4px  
   width: 24%; /* You might want to use fixed width in pixels here */
}