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. Advertising

  2. Disc Magnet

    123Jim Guest

    "Disc Magnet" <> wrote in message
    news:...
    > 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>


    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. Advertising

  3. Disc Magnet

    123Jim Guest

    "123Jim" <> wrote in message
    news:hsk2lj$cac$-september.org...
    >
    > "Disc Magnet" <> wrote in message
    > news:...
    >> 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>


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


    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. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. George
    Replies:
    4
    Views:
    475
    George
    Feb 13, 2004
  2. Matt
    Replies:
    0
    Views:
    3,520
  3. John Hann
    Replies:
    0
    Views:
    6,029
    John Hann
    Aug 21, 2004
  4. Matt
    Replies:
    9
    Views:
    70,747
  5. =?Utf-8?B?Ui5OaWprYW1w?=

    Listbox disabled - cant scroll in IE - can scroll in Firefox

    =?Utf-8?B?Ui5OaWprYW1w?=, Nov 22, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    1,207
    =?Utf-8?B?Ui5OaWprYW1w?=
    Nov 22, 2006
Loading...

Share This Page