Forum Moderators: not2easy
overflow in fieldset > pre works in IE and opera, but not in FF, Safari and Chrome.
<snip>
[edited by: swa66 at 4:48 pm (utc) on May 24, 2009]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<title>OverFlow</title>
<style type="text/css">
* { margin:0; padding:0; }
body { padding:10px; }
.div1
{
} .div1 fieldset
{
}
.div1 fieldset pre
{
overflow:auto; overflow-y:hidden;
}
.div2
{
border:1px solid red;
}
.div2 pre
{
overflow:auto; overflow-y:hidden;
}
</style>
<!--[if IE]>
<style type="text/css">
.div1 fieldset pre { width:100%; padding-bottom:20px; }
.div2 pre { width:100%; padding-bottom:20px; }
</style>
<![endif]-->
</head>
<body>
<div class="div1">
<fieldset>
<legend>Example Code</legend>
<pre>A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.</pre>
<div>Static Footer</div>
</fieldset>
</div>
<br/>
<div class="div2">
<pre>A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.</pre>
<div>Static Footer</div>
</div>
</body>
</html>
Looking to dig a bit deeper I looked for the browser default CSS for frameset in Firefox 3:
frameset {
display: block ! important;
overflow: -moz-hidden-unscrollable;
position: static ! important;
float: none ! important;
border: none ! important;
}
2. Giving !important didnt work
.div1 fieldset pre
{
overflow:auto !important;
}
The browser css in FF3 doesn't actually set any CSS for fieldset.
Still, the special treatment in creating a new stacking context is for fieldset,
Sorry for adding to the confusion.
