Table cell unnecessarily overflows wrapper in FF and IE - html

Question

I tried to create a box with rotating content, simply using an outer box with a specified width and overflow: hidden, and inner boxes with display: inline-block; width: 100%. Everything worked as expected, until I added an image to each of the three "content boxes". Even though the images were narrow enough to fit well within the available space, the outer box' parent element now started overflowing its parent, in turn making the rotating box wider (since it had a relative width). The problem was the same in FF (28) and IE (11), but things were fine in Chrome.
In the end I boiled it down to this being a table layout issue, since adding table-layout: fixed on a table ancestor stopped the td parent of the rotating box to grow unneccessarily. (There are tables used for layout due to legacy reasons.)
What I wonder now is why this is happening, and if there is something wrong with my approach for the boxes. I've created a minimal example of the problem below (fiddle at http://jsfiddle.net/rvy2V/9/).
(In the example I use overflow: visible instead of hidden to make it easier to see what is going on. I also have whitespace between the inline blocks, which is bad for layout but good for clarity.)
HTML
<div id="wrapper">
wrapper
<table>
<tbody>
<tr>
<td id="cell">
table cell
<div class="niceBox slidePanes" id="outerBox">
<span class="slidePane">
.slidePane
<div class="body">
<div class="inner">inner box</div>
</div>
</span>
<span class="slidePane">
.slidePane
<div class="body">
<div class="inner">inner box</div>
</div>
</span>
<span class="slidePane">
.slidePane
<div class="body">
<div class="inner">inner box</div>
</div>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS
.niceBox {
border: 1px solid #d7d7d7;
background-color: #f6f6f6;
}
.slidePanes {
overflow: visible;
white-space: nowrap;
}
.slidePanes .slidePane {
display: inline-block;
width: 100%;
white-space: normal;
vertical-align: top;
background-color: #bbf;
padding: 5px 0;
}
#wrapper {
width: 525px;
background-color: #888;
}
#cell {
background-color: #bbb;
}
#outerBox {
width: 50%;
}
div.inner {
width: 230px;
background-color: #f88;
}
Note in the fiddle how the table cell (medium gray) is wider than the wrapper (dark gray), but still not wide enough to contain all three content boxes (purple). Also note how, as a result, the rotating box (yellow border) is wider than the intended 50% of the wrapper. Also note how the inner boxes (red), which should be the widest thing in each content box, is not determining the width of each box.