Welcome to WebmasterWorld Guest from 35.172.100.232

Forum Moderators: not2easy

Message Too Old, No Replies

overflow in fieldset > pre

works in trident and presto, not in gecko and webkit

     
4:36 pm on May 24, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 28, 2004
posts: 86
votes: 0


Any idea why fieldset > pre is not overflown ?

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>

5:47 pm on May 24, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


I know a frameset get some special treatment from browsers. E.g. it seems like they create a new stacking context (even though there is no mention of that in the standards.

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;
}

Hence even if you don't set any CSS for the fieldset it'll get some CSS attributes from the browser(s), and as usual they might be sending different settings in order to be "helpful".
7:01 pm on May 24, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 28, 2004
posts: 86
votes: 0


1. I am looking at fieldset, not frameset

2. Giving !important didnt work


.div1 fieldset pre
{
overflow:auto !important;
}
8:57 pm on May 24, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Oops, my mixup.

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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members