Scroll bar inconsistencies in Firefox vs. Chrome

Discussion in 'HTML' started by Disc Magnet, May 14, 2010.

  1. Disc Magnet

    Disc Magnet Guest

    If I wrap a <pre> with style as "overflow: auto" inside a <div> with
    style as "word-wrap: break-word;" I get this behavior:

    * No scroll bar in Chrome; long lines wrap.
    * Long text causes scroll bar to appear in Firefox.

    The behavior I need is scroll bar appearing for long lines in all
    browsers. Here is the code (also available at http://www.webdevout.net/test?01q
    for sometime). Please help.

    <html>
    <head><title>Console Effect</title>
    <style type="text/css">
    ..wrap {
    word-wrap: break-word;
    }

    pre {
    width: 50em;
    padding: 2px 5px;
    background: #000000;
    color: #bbbbbb;
    overflow: auto;
    }
    </style>
    <head>
    <body>
    <p>
    Foo
    </p>
    <div class="wrap">
    <pre>
    123456789 123456789 123456789 123456789 123456789 123456789 123456789
    123456789 1234567890

    int main()
    {
    printf("hello, world\n");
    }
    </pre>
    <p>
    Bar
    </p>
    </div>
    </body>
     
    Disc Magnet, May 14, 2010
    #1
    1. Advertisements

  2. Disc Magnet

    123Jim Guest

    Take a look here:
    http://myweb.tiscali.co.uk/ladycroft/ConsoleEffect.html
    It's closer to what you want I think, Chrome, IE and firefox (latest
    versions) display the same, no vertical scrollbar. There is a new problem
    however.. blank lines ..(I'll take a look at that later)
    Here's the modified markup:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title>Console Effect</title>

    <style type="text/css">
    ..wrap {
    padding: 2px 5px;
    background: #000000 none repeat scroll 0% 50%;
    color: #bbbbbb;
    width: 50em;
    font-family: monospace;
    overflow: auto;
    white-space: pre;
    }

    </style></head>
    <body>
    <p>
    Foo
    </p>
    <div class="wrap">
    123456789 123456789 123456789 123456789 123456789 123456789 123456789
    123456789 234567890<br>
    int main()<br>
    {<br>
    printf("hello, world\n");<br>
    }<br>
    </div>
    <p>
    Bar
    </p>
    </body></html>
     
    123Jim, May 14, 2010
    #2
    1. Advertisements

  3. Disc Magnet

    123Jim Guest

    OK I had to update this .. Kompozer was placing <br> throughout the code in
    the <div> pretending to be <pre> .. That explains the blank lines, now
    fixed. The only problem I see now is IE is choosing larger fonts than Chrome
    and Firefox .. I'm sure someone will have the answer before I figure it out
    ;)

    Updated Markup:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title>Console Effect</title>

    <style type="text/css">
    ..wrap {
    padding: 2px 5px;
    background: #000000 none repeat scroll 0% 50%;
    color: #bbbbbb;
    width: 50em;
    font-family: monospace;
    overflow: auto;
    white-space: pre;
    }
    body {
    font-size: 100%;
    }
    </style>
    </head>
    <body>
    <p>
    Foo
    </p>
    <div class="wrap">123456789 123456789 123456789 123456789 123456789
    123456789 123456789 123456789 234567890

    int main()
    {
    printf("hello, world\n");
    }
    </div>
    <p>
    Bar
    </p>
    </body></html>
     
    123Jim, May 14, 2010
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.