Menu
I have an element which may contain very big amounts of data, but I don't want it to ruin the page layout, so I set max-height: 100px and overflow:auto, hoping for scrollbars to appear when the content does not fit.
It all works fine in Firefox and IE7, but IE8 behaves as if overflow:hidden was present instead of overflow:auto.
I tried overflow:scroll, still does not help, IE8 simply truncates the content without showing scrollbars. Changing max-height declaration to height makes overflow work OK, it's the combination of max-height and overflow:auto that breaks things.
This is also logged as an official bug in the final, release version of IE8
Is there a workaround? For now I resorted to using height instead of max-height, but it leaves plenty of empty space in case there isn't much data.
505
This is a really nasty bug as it affects us heavily on Stack Overflow with <pre> code blocks, which have max-height:600 and width:auto.
It is logged as a bug in the final version of IE8 with no fix.
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
There is a really, really hacky CSS workaround:
http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode
/*
SUPER nasty IE8 hack to deal with this bug
*/
pre
{
max-height: none\9
}
and of course conditional CSS as others have mentioned, but I dislike that because it means you're serving up extra HTML cruft in every page request.
196
{
overflow:auto
}
Try div overflow:auto
4
I saw this logged as a fixed bug in RC1. But I've found a variation that seems to cause a hard assert render failure. Involves these two styles in a nested table.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
.calendarBody
{
overflow: scroll;
max-height: 500px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
This is a cell in the outer table.
<div class="calendarBody">
<table>
<tbody>
<tr>
<td>
This is a cell in the inner table.
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
