Скроллинг и/или растягивание списка

[MIT]

Приветствую всех.

Столкнулся с задачей переделки хайлайтера исходников, но не могу побороть одну проблему связанную с CSS.

На выходе получается конструкция такой структуры:

<div class="content">
	<dl class="codebox">
		<dt>Заголовок</dt>
		<dd>
			<div class="codebox1">
				<ol>
					<li>
						<pre><span style="color: #235ae6;">Public</span> <span style="color: #235ae6;">Class</span> Form1</pre>
					</li>
					<li>
						<pre> </pre>
					</li>
				</ol>
			</div>
		</dd>
	</dl>
</div>

CSS:

div.codebox1 {
background-color:#C0CDDE;
font-size:0.9em;
line-height:1.1em;
max-height:250px;
overflow:scroll;
}
div.codebox1 ol {
background-color:#F3F8FF;
margin-bottom:0;

}
div.codebox1 ol li {
padding-left:3px;
border-left: 2px solid #255289;
font-weight: normal;
vertical-align: top;
padding-right:10px;
}

Задача: сделать этот список scrollable`вым, причем что бы было это красиво.

Проблема: Основная проблема в том что список получается слишком узким.

Если список промотан в самое левое положение, то все нормально:

однако стоит его промотать чуть вправо, как появляется неприятный эффект:

При этом я как бы понимаю из-за чего это, но вот решения в голову не приходит.

Пробовал в стиль списка (div.codebox1 ol) добавить строку display:inline-block;, однако этот трюк помогает далеко не всегда.

Пробовал сделать скроллбары у самого списка, а не у его обертки, но все равно получается не очень красиво - исчезают цифры элементов списка:

что тоже не фонтан.

Надеюсь задумка понятна. Помогите, плиз.

[Nekromancer]

может я туплю, но по моему вся проблема вот в этом месте:

padding-right:10px;

[MIT]

может я туплю, но по моему вся проблема вот в этом месте:

Нет, проблема не в этом месте. На втором скрине (заметь) горизонтальный скроллбар еще можно скроллить вправо (еще правее ничуть не лучше), а паддинг сделан для того, что бы текст не прислонялся к самой правой стороне.

Да, фишка с display:inline-block; работает в нормальных браузерах (читай - Опера), Хроме, не всегда (по непонятной схеме) работает в ФФ3 и конечно она не работает в IE8 в режиме совместимости.

FireBug показывает список вот так:

что, в общем-то, верно, просто надо растянуть список на всю ширину переполненного дива-обертки.

Edited May 13, 2009 by MIT

[Nekromancer]

ну на сколько я понимаю просто список в любом случае не будет растягиваться дальше чем 100% от ширины родителя..

[MIT]

Если просто список не будет, то возможно ли использовать такие варианты:

1) не просто список

2) мой альтернативный подход со скроллингом самого списка - как решить проблему с исчезающими номерами строк?

3) что-нибудь совсем альтернативное, о чем я пока не подумал

?

Буду рад любым конструктивным предложениям для достижения поставленной цели.

Добавлено:

И вот еще вопрос - как сделать перенос в строке (в li), что бы горизонтальная полоса прокрутки не появлялась?

[MIT]

Да, обидно, что никто не знает.

По поводу пропажи номеров строк: выяснил, что это зависит от установленного свойства overflow. Как можно побороть такое гнусное поведение?

[MIT]

Добавлено:

Разобрался в причине пропадания номеров. Оказывается все дело в том, что обнулялся паддинг всех элементов:

* {
padding:0;
}

Для того, что бы они магическим образом появились ставим в стиль списка padding-left:3em;