FireFox CSS - overflow:hidden with vertical-align

[esteuart]

I need to get the right combination for a div to clip any text inside and allow vertical alignment. I only have this problem in FireFox. I have 3 divs nested within each other. The outer div has display of table, the first inner div has display of table-cell and the inner-most div has the text. The outer div has a set width and height.

So here's the problem:

• Without the inner divs having a width and height set, the overflow:hidden doesn't clip; the text causes the div to stretch.
• If I assign the inner divs a width and height of 100% then it doesn't stretch, but vertical-align doesn't work anymore.
• If i assign the inner divs a width and height equal to the outer div, it not only is not vertically aligned, it makes the div bigger than it should be.

Here's the code:
[html]<!-- With inner div width set -->
<div id="outerDiv" style="font-style:normal;left:0px;text-align:Left;width:200px;font-weight:normal;height:200px;position:Relative;top:0 px;display:table;color:#000000;font-family:Arial;border:#000000 Solid 1px;background-color:#ffffff;overflow:hidden;font-size:12pt;">

<div id="ltoPreview_nest1" style="display:table-cell;vertical-align:Top;overflow:hidden;width:100%;height:100%;" >

<div id="ltoPreview_nest2" style="overflow:hidden;width:100%;height:100%;text-decoration:none;">Text Goes Here</div>

</div>

</div>[/html]
[html]
<!-- Without inner div width set -->
<div id="outerDiv" style="font-style:normal;left:0px;text-align:Left;width:200px;font-weight:normal;height:200px;position:Relative;top:0 px;display:table;color:#000000;font-family:Arial;border:#000000 Solid 1px;background-color:#ffffff;overflow:hidden;font-size:12pt;">

<div id="ltoPreview_nest1" style="display:table-cell;vertical-align:Top;overflow:hidden;">

<div id="ltoPreview_nest2" style="overflow:hidden;text-decoration:none;">Text Goes Here</div>

</div>

</div>[/html]

[esteuart]

Okay, I figured out a way around this. It uses a table, but it works.

Vertical-align is designed for table cells, that is why there must be a div with a display: table and a nested one with display: table-cell. Then all items inside the table-cell div will be aligned vertically (the vertical-align style must be on the same div as the table-cell).

Well, I figured since it is designed for table cells, maybe it would work better on a real table cell, and it does! Here's the stripped down code that clips and keeps dimensions:

[html]
<div style="position:absolute; left:200px; width:50px; height:100px; top:50px; border: 1px solid black; overflow:hidden;">

<table width=100% height=100%>

<tr>

<td style="vertical-align:middle">Text goes here</td>

</tr>

</table>

</div>
[/html]

[drhowarddrfine]

Vertical-align is designed for table cells

No, it's designed for table cells and inline elements.