inline block problem on firefox and internet explore - html

Question

I am having a difficult time with how ie and firefox are displaying inline-block. I should probably point out that Google chrome displays it as intended..
<div class="cell">
<div><img src="images/dftg.jpg" /></div>
<p>Sean val</p>
</div>
The problem occurs in firefox and ie when i write a longer name in the paragraph above, in the parapgrah above. in firefox and ie, the cell div moves up thereby making the layout look weird and inconsistent.
.cell {
display: inline-block;
display:-moz-inline-stack;
border: 3px solid #ff0000;
padding: 7px;
height: 170px;
zoom: 1;
*display: inline;
_height: 170px;
}
.cell p {
padding: 10px 25px;
width: 150px;
}

Answer 1

You're probably having this problem because you haven't specified any vertical-align.
Try using this:
.cell {
display: inline-block;
vertical-align: top;
border: 3px solid #ff0000;
padding: 7px;
height: 170px;
zoom: 1;
*display: inline;
_height: 170px;
}
You can forget about display: -moz-inline-stack - that's only for Firefox 2, which has very, very low usage.
The article you probably read while "doing research" was this:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
You should probably read it again, as it does mention using vertical-align.

Answer 2

You should check dates on articles you read. Inline-block has been supported since FF3.
Another obscure-but-useful new feature making its way into Firefox 3 after all the other major browsers support it (mostly) is the inline block. When assigned to an element, a display type of inline-block causes the element to be positioned inline (like a span), but the element's contents are laid out as if the element were a block.
http://ajaxian.com/archives/soft-hyphens-and-inline-block-subtleties-in-firefox-3-rc-1
Anyway, looks like you solved it.