overflow in fieldset > pre [Archive]

anjanesh

05-24-2009, 08:37 PM

Anyone know the default CSS properties of fieldset in gecko and webkit ?
fieldset > pre is not overflown
overflow in fieldset > pre works in IE and opera, but not in FF, Safari and Chrome.

http://74.63.227.98/~bombayel/temp/pre-overflow.html

<!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
{
display:block!important;
}

.div1 fieldset pre
{
overflow-x:scroll !important;
overflow-y:hidden;
}

.div2
{
border:1px solid red;
}

.div2 pre
{
overflow:auto;
overflow-y:hidden;
}
</style>



</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>

VIPStephan

05-25-2009, 02:54 PM

Uhm… Do you know what fieldsets and legends are for? They are actually meant for forms, a fieldset groups a set of form fields with the legend as description. While it’s not technically wrong to use fieldsets in other ways it’s not very semantic.

Secondly: Overflow only makes sense if you have a size defined, otherwise the size of the element will always adapt to the amount/size of the content. You’ll see that when you assign a width to the pre element it will cut off the text. Then the only problem is the height of the element. If it’s too small then the scrollbare isn’t shown (because it would block the text from bein visible). Assign a height to the pre element and you’ll see.