Question

Consider the following example: (live demo here)

HTML:

<div class="board">
  <div class="row">
    <div class="cell blue"></div><div class="cell"><img src="http://i44.tinypic.com/25sa9z4.png" /></div><div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div><div class="cell"></div><div class="cell"></div>
  </div>
</div>

CSS:

.cell {
  width: 16px;
  height: 16px;
  display: inline-block;
}
.blue.cell {
  background-color: blue;
}
.row {
  height: 16px;
  background-color: #aaa;
}
.board {
  width: 48px;
}

In Chrome 17 and Safari 5.1.4, the blue cell is in the first row, as expected.
But, in Firefox 11.0 the blue cell is in the second row!

Why is this difference? How to make this consistent?

Answer 1

See the fiddle and demo:

Fiddle: http://jsfiddle.net/cSWnb/12/

Demo: http://jsfiddle.net/cSWnb/12/embedded/result/

updated Fiddle:

Fiddle: http://jsfiddle.net/cSWnb/23/

Demo: http://jsfiddle.net/cSWnb/23/embedded/result/

.cell {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align:top;
}
.blue.cell {
    background-color: blue;
}
.row {
    height: 16px;
    background-color: #aaa;
}
.board {
    width: 48px;
}

See below image:

The berries image is taking the height more than cells height so FF is showing rendring issue. This is browser compatibility issue and chrome and safari are webkit based browser so they both render similarly. In FF by default the elements are not Vertical-align:top; so we have to set the css properties to make the elements for browser compatibility.