Question

I have a problem with FireFox rendering that I don’t have in other browsers. I have a table cell that is resizable via the colResisable plugin. In my second cell I have two divs, one containing an unordered list and the other with a table. I’m not sure the contents of these div matters.

Both of these divs are styled as inline-block. The parent has nowrap for the whitespace in an effort to prevent the second inline-block from falling beneath the first. My intention is that the content would overflow the parent TD with a scrollbar.

This works correctly in IE, Safari and Chrome, but in FireFox the content overlaps on top of the border of the parent.

Here are two screenshots showing the difference:

I have a JSFiddle that approximates this behavior, but I can’t quite get it the same. Hopefully someone will see this and know what’s going on.

Answer 1

You could change display: inline-block to float: left:

#content_1, #content_2 {
    ...
    float: left;
    ...
}

Working example: http://jsfiddle.net/xVNae/24/

---

If you want to keep display: inline-block try changing changeing border-collapse to inherit for table:

table {
    border-collapse: inherit;   
}

Working example: http://jsfiddle.net/xVNae/25/