I created a simple html source, and applied a small CSS style sheet to it:
html {
width: 100%;
}
body {
font-family: Calibri, Tahoma, Geneva, sans-serif;
padding: 20px;
}
pre {
padding: 0;
margin: 0 auto;
border: 1px solid #888;
font-family: Menlo,Monaco,Consolas,monospace;
color: #000;
width: 80%;
overflow: auto;
}
pre li { white-space: pre; }
ol { margin-top: 0; margin-bottom: 0; /* IE indents via margin-left */
color: #979797; background: #E3E3E3; }
.li1 { background: #F5F5F5 }
.li2 { background: #eee }
I have an ordered list inside a pre-formatted tag. Every other list element is either given the class attribute li1 or li2 (the purpose of which is to alternate the colors). The list elements need the white-space: pre because the white space before and after the text node is important. The pre is to be 80% of the containing element (which ends up being 80% of the window's width). In the event of overflow in the x dimension, I want scrolling.
I did all this in the above CSS, and it almost works. The issue I am having is that the background colors of the list elements don't extend with the
content. They seem to be capped to the original width of the pre and/or ol element as demonstrated in the following picture where I scroll all the way right as possible:
I tinkered with the CSS for a while, but I cannot determine the root cause for this or the fix. Looking for some advice on this one, thanks.
Complete source with the issue is as below, NOTE: to would-be editors of the below code the pre element is intended to be on a single line as it's pre-formatted text, and formatting it otherwise would change things.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test Site</title>
<style type="text/css">
html {
width: 100%;
}
body {
font-family: Calibri, Tahoma, Geneva, sans-serif;
padding: 20px;
}
pre {
padding: 0;
margin: 0 auto;
border: 1px solid #888;
font-family: Menlo,Monaco,Consolas,monospace;
color: #000;
width: 80%;
overflow: auto;
}
pre li { white-space: pre; }
ol { margin-top: 0; margin-bottom: 0; /* IE indents via margin-left */
color: #979797; background: #E3E3E3; }
.li1 { background: #F5F5F5 }
.li2 { background: #eee }
</style>
</head>
<body>
<pre class="php"><ol><li class="li1">pre a { text-decoration: none }</li><li class="li2">pre a:hover { background: #C8C8C8 }</li><li class="li1">pre li { white-space: pre; }</li><li class="li2"> </li><li class="li1">.php ol { margin-top: 0; margin-bottom: 0; /* IE indents via margin-left */</li><li class="li2"> color: #979797; background: #E3E3E3; }</li><li class="li1"> </li><li class="li2"> </li><li class="li1"> </li><li class="li2">.php .li1 { background: #F5F5F5 }</li><li class="li1">.php .li2 { background: #eee }</li><li class="li2"> </li><li class="li1"> </li><li class="li2">.php .st0 { color: #C0C } /* string
content */</li><li class="li1">.php .st_h { color: #F0C } /* string
content single quoted */</li><li class="li2">.php .sy0 { color: #000 } /* semi-colon, operators */ </li><li class="li1">.php .br0 { color: #000 } /* parens */</li><li class="li2">.php .kw2 { color: #00F } /* php tags */</li><li class="li1">.php .sy1 { color: #00F } /* php tags */</li><li class="li2">.php .nu0 { color: #F00 } /* numbers */</li><li class="li1">.php .kw3 { color: #096 } /* core language functions */</li><li class="li2">.php .re0 { color: #09F; font-weight: bold; } /* variables */</li><li class="li1">.php .kw1 { color: #069; font-weight: bold; } /* control statements? */</li><li class="li2">.php .kw4 { color: #069; font-weight: bold; } /* bool? */</li><li class="li1">.php .co1 { color: #FF8400 } /* Forward slash comments */</li></ol></pre>
</body>
</html>
