SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    overflow in fieldset > pre

    Is there some default property in fieldset that makes overflow not work in Gecko and webkit browsers ? overflow in fieldset > pre works in IE and opera, but not in FF, Safari and Chrome.
    Code CSS:
    <html>
    <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>Legend Title</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>
    </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>
     
    </body>
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    1) You are in quirks mode by not having a doctype at all.

    Add in this line of code before <html>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    A quick fix (though I am not completely sure as to why it is not obeying the overflow property values) is to give .div1 and .div2 overflow:auto;
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem is, I need just the <pre> part overflown - not the entire div.
    http://74.63.227.98/~bombayel/temp/pre-overflow.html

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I believe some JS will be needed
    Code:
    .div1 fieldset pre {
    overflow-x:scroll;
    overflow-y:hidden;
    width:1000px;
    }
    Works in gecko browsers (width:1000px is just my resolution). You can detect hte screen width in JS and then apply that to the width of the pre. I don't know what else to tell you .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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