Working around overflow:visible default behavior
If no width or height is set, then boxes in your layout should pretty much behave like they did
with IE6 (exceptions if you have very long words or pre content that might overflow the
viewport). You should be fine here.
There are two cases where your layout might break due to the new behavior:
If you have set a width or height on your content and you did not realize that your content is
actually larger than the set dimensions.
This case is very easy to solve. Just identify the correct size of your content (the ruler of the
Developer Toolbar can help you do it) and set the correct dimensions on your box.
If you have dynamic content that requires changes to your box size on the fly. This can happen if
you insert content dynamically, or you did not specify a font size and the user changes it as part
of the user settings.
There is a declarative solution using min/max width/height properties that can correct behavior
issues introduced by the overflow correction. Consider the following example.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<title>
CSS: Overflow:visible and Min/Max
</title>
<style>
.DivClass1
{
background:orange;
width:150px;
height:100px;
}
</style>
<body>
<div contenteditable=true class=DivClass1>
this is a DIV with a fixed width and height
of 100 pixels, in IE 6, the height of the DIV will extend to the
height of the content. In IE7, the height of the DIV is 100px as
specified, but the text overflows outside of the box.
</div>
</body>
</html>
You can correct this behavior by using the new min-height property for all modern browsers like
IE7. To ensure that your behavior does not change for older versions of IE, we recommend the
use of conditional comments.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<title>
CSS: Overflow:visible and Min/Max
</title>
<!-- Will only be read by IE versions less then IE 7-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="Demo/iestyles.css" />
<![endif]-->
<style>
.DivClass1
{
background:orange;
width:150px;
min-height:100px; // will be ignored by IE6
}
</style>
<body>
<div contenteditable=true class=DivClass1>
this is a DIV with a fixed width and height
of 100 pixels, in IE 6, the height of the DIV will extend to the
height of the content. In IE7, the height of the DIV is 100px as
specified, but the text overflows outside of the box.
</div>
</body>
</html>
In iestyles.css, you would specify the behavior of IE6 and below.
.DivClass1
{
height:100px; // applies only to versions that do not understand min-height
}
The use of conditional comments is an easy and maintainable way to separate behavior of older
IE versions form the more standards compliant behavior of IE7.
this is a DIV with a fixed width and height
of 100 pixels, in IE 6, the height of the DIV will extend to the
height of the content. In IE7, the height of the DIV is 100px as
specified, but the text overflows outside of the box.