Image in a fixed div - Interesting Firefox behavior

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 on the second line!

Why is this a difference? How to do it?

Answer 1

See script 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 image below:

The image of berries is higher than the height of the cells, so FF shows a problem with expansion. This is a browser compatibility issue, and Chrome and Safari are webkit-based browsers, so they both display the same. In FF, by default, elements are not Vertical-align: top; therefore, we must set the css properties to create elements for browser compatibility.

Answer 2

This is not the second cell that is blue, this is the first cell that is blue. The difference is in positioning.

In Safari and Chrome, the cells are aligned at the top because WebKit knosw two elements cannot occupy the same space and restyle several other elements to get the correct output, so WebKit is the best. In Firefox, cells move to the bottom because the image aligns to the baseline. Thus, it seems that the second cell is blue, but indeed the first cell.

Try setting vertical-align to top on img and you will see cells that are aligned at the top and the first cell is blue. http://jsfiddle.net/cSWnb/21/