ansaurus

Question

In my LI, why is the bg color of the overflow different than the bg color of the rest?

Answer 1

+1 A:

This is the correct behaviour. This is because when text overflows out of an element (in this case, the pre) the box does not grow with it.

Delan Azabani 2010-09-18 09:57:27

Answer 2

+1 A:

To get around this width problem, you can set your pre tag to display: inline. Then, I simply added some extra padding on the li tag to retain the same look.

Full example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <style type="text/css">
        ol
        {
            width: 200px;
            background-color: #CFCFCF;
        }
        pre
        {
            color: #FFF;
            background-color: #000;
            display: inline;
        }
        .code li
        {
            margin: 12px 0px 12px 0px;
        }
        .code
        {
            overflow: scroll;
        }
    </style>
</head>
<body>
    <ol class="code">
        <li>
            <pre>World! This is a long line that you have to scroll to see.</pre>
        </li>
        <li>
            <pre>This is the second line that you have to scroll to see.</pre>
        </li>
    </ol>
</body>
</html>

wsanville 2010-09-18 13:51:19

ansaurus

tags:

views:

answers:

In my LI, why is the bg color of the overflow different than the bg color of the rest?

related questions