Scroll bar inconsistencies in Firefox vs. Chrome

Disc Magnet · May 14, 2010

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>

123Jim · May 14, 2010

Disc Magnet said:
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

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>

80 character wide <pre> block appears only 60 character wide onWindows	2	May 14, 2010
Dropdown menu in a fixed navbar	1	Apr 1, 2024
iframe in ie & ff & Chrome & Opera	5	Dec 5, 2008
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
list alignment problem in Google Chrome	9	Jul 30, 2009
Overflow Scroll in Firefox	10	Jun 4, 2005
I need help making a zooming function	11	Dec 14, 2021

Scroll bar inconsistencies in Firefox vs. Chrome

Disc Magnet

123Jim

123Jim

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads