Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    overflow in fieldset > pre

    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

    Code:
    <!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>
    
            <!--[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>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,703
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •