Home/ Questions/Q 979367
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T04:12:32+00:00

I am not able to figure out why this does happen. On all non-webkit

  • 0

I am not able to figure out why this does happen.
On all non-webkit browsers I tested the code below with (IE8, FFx 3.x, Opera 10.x) there is no scrollbar on the <pre> area. For both Chrome and Safari vertical scrollbar appears.

Of course I do not want it to appear.

The code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB" dir="ltr"> 
    <head>
        <style type="text/css" media="screen,projection">
body {
    color: black;
    font-family: Verdana, sans-serif;
    font-size: 90%;
}

#container {
    font-size: 9pt;
}

#container-content {
    color: black;
    line-height: 1.5em;
}

pre {
    background-color: #F9F9F9;
    border: 1px dashed #2F6FAB;
    color: black;
    font-family: 'Courier New', monospace;
    font-size: 1em;
    line-height: 1.1em;
    overflow: auto;
    padding: 15px 20px;
    width: 150px;
}
        </style>
    </head>
    <body>
        <div id="container">
            <div id="container-content">
                <pre>line 1
line 2
and this is a very long like it is, and this is a very long like it is
line 4</pre>
            </div>
        </div>
    </body>
</html>

Note that this is a code snippet from a large project. All unrelated code is stripped out.

Removing line-height or making it >= 1.3em solves the problem but I want it to be 1.1em.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you change the overflow property to the default (visible) or remove it, the scroll bar disappears. See: http://www.w3schools.com/css/pr_pos_overflow.asp

    • 0