By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,855 Members | 1,988 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,855 IT Pros & Developers. It's quick & easy.

FireFox CSS - overflow:hidden with vertical-align

P: 2
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]
Aug 25 '07 #1
Share this Question
Share on Google+
2 Replies


P: 2
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]
Aug 25 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
Vertical-align is designed for table cells
No, it's designed for table cells and inline elements.
Aug 26 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.