inline block problem on firefox and internet explore

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 in开发者_JAVA百科consistent.

.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;
}

---

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.

---

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.