Растягивание spana в IE6

[Yahoo!]

Есть проблемка.

Есть блок с overflow: auto

В нём span с display: block и заданной высотой

Всё нормально, но в IE6 при заполнений больше 100% от родителя текстом вместо, того что б продолжать строку и тем самым образовывать полосу прокрутки у родителя, он переносит строчку. word-space: nowrap не помогает =(

Что сделать? Заранее спасибо.

[psywalker]

Есть проблемка.

Есть блок с overflow: auto

В нём span с display: block и заданной высотой

Всё нормально, но в IE6 при заполнений больше 100% от родителя текстом вместо, того что б продолжать строку и тем самым образовывать полосу прокрутки у родителя, он переносит строчку. word-space: nowrap не помогает =(

Что сделать? Заранее спасибо.

Дай ссылку чисто с этой ситуацией и покажи скрин, чё хош получить.

[Игорь Ермаков]

http://htmlbook.ru/html/pre.html

Может оно?

[klierik]

вообще так и должно работать, ведь ты ставишь overflow: auto;

[Yahoo!]

Конструкция такая:

<div class="code">
	  <table>
			 <tr>
					 <td class="listNumber">
							 <pre><span>1</span></pre>
					 </td>
					 <td class="codeWrap">
							  <pre><code><span>TyT KAKOu-TO TPAHCJIuTHblu TEKCT</span>
</code></pre>
					 </td>
			 </tr>
	  </table>
</div>

http://htmlbook.ru/html/pre.html

Может оно?

Не до такой степени я новичок

Скрин не нужен думаю, в лисе всё отображается супер.

[Игорь Ермаков]

Стили нам самим додумать?

[psywalker]

div.code { overflow: auto;width: 100%;}

Стили нам самим додумать?

я за него подумал))

[Yahoo!]

я за него подумал))

Шутку оценил. На самом деле всё не так просто. Объяснять честно долго, ещё вдруг не так объясню.

Вот короче ссылка (смотреть только первый пример с кодом)

http://www.greymlelelele.chat.ru/statza.html

За статью не бейте =)

Edited December 25, 2009 by Yahoo!

[psywalker]

у меня в ие6 также как и в ФФ

[Yahoo!]

у меня в ие6 также как и в ФФ

Всмысле? Там есть один длинный комментарий, в фф он продолжается, а в ИЕ6 переноситься но новую строку. У тебя как?

[psywalker]

хм..странно, а попробуй так

div.code { overflow: auto;width: 100%;}
span { display: block; width: 100%; }
table { width: 100%;}

[Yahoo!]

Не помогает. Всё дело в spanе

	.code span,
	.code-2 span {
		display: block; 
		height: 0.3em;
		font-size: 1em;
		word-space: nowrap;
		width: 100%
	}

	.code span span,
	.code-2 span span {display: inline}

До того как я их вставил, всё было норм.

Кстати помогает костыль для ие6, если задать spanу например width:200%, тогда строка будет занимать больше 100% и не будет переноситься. но это как-то... ну не то=)

200% и позади всей конструкций пустое пространство, а вдруг строка будет ещё длиннее, это не есть гуд

[psywalker]

погоиди, у меня позади нет никакой конструкции так

div.code { overflow: auto;width: 100%;}

span { display: block; width: 200%; }

[Yahoo!]

Есть-есть, посмотри сейчас, для всех браузеров width: 300% для спана.

[Yahoo!]

Вот теперь всёёё. Я очень трашно ступил! Надо было писать white-space... Плюс ещё пару колдовских мелочей и полная кроссбраузерность. Единственно, но это большое межстрочное расстояние...

Edited December 25, 2009 by Yahoo!

[psywalker]

Вот теперь всёёё. Я очень трашно ступил! Надо было писать white-space... Плюс ещё пару колдовских мелочей и полная кроссбраузерность.

А выложи весь код поглядеть

[Yahoo!]

CSS:

	.code {overflow: auto; max-height: 500px}
	.code-2 {height: 1%}

	.code, 
	.code-2 {
		border: 1px solid #aaa; 
		margin: 1em 0; 
		line-height: 1em
	}

	.code table,
	.code-2 table {
		table-layout: fixed; 
		height: 100%; 
		width: 100%
	}

	.code .lineNumber,
	.code-2 .lineNumber {
		text-align: right; 
		background: #ECE9D8; 
		color: #555;
		width: 2em
	}

	.lineNumber pre {padding: 1em 0.5em 1em 0;}

	.code .codeWrap {
		padding: 0 0 0 0.5em
	}

	.code-2 .codeWrap pre {
		overflow: auto; 
		width: 100%; 
		float: left
	}

	.code-2 .codeWrap pre code {
		padding: 1em 0 1em 0.5em;
		display: block
	}

	.code span,
	.code-2 span {
		display: block; 
		height: 1.2em;
		font-size: 1em;
		white-space: nowrap;
		line-height: 1.2em
	}

	.code span span,
	.code-2 span span {display: inline}

HTML:

<div class="code-2">
												<table>
													<tr>
														<td class="lineNumber">
															<pre><span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
</pre>
													</td>
													<td class="codeWrap">
<pre><code><span><span class="commentHTML"><!--CSS:--></span></span>
<span><span class="tagHTML"><style</span> <span class="attribute">type</span>=<span class="value">"text/css"</span><span class="tagHTML">></span></span>
<span><span class="tagCSS">.box</span> {</span>
<span><span class="commentCSS">/*в начале закруглим углы*/</span></span>
<span><span class="property">border-radius</span>: 5px; <span class="commentCSS">/* основное свойство; 5px — это радиус закругления */</span></span>
<span><span class="property">-moz-border-radius</span>: 5px;<span class="commentCSS"> /* закругляем углы для браузеров на мозиловском движке, в том числе для наших любимых fire fox'ов 3+ */</span></span>
<span><span class="property">-webkit-border-radius</span>: 5px; <span class="commentCSS">/* закругляем углы для браузеров на движке webkit */</span></span>
<span><span class="commentCSS">/* помните, что необходимо прописывать все эти три строки */</span></span>
<span></span>
<span><span class="commentCSS">/* + */</span></span>
<span><span class="property">padding</span>: 5px;</span>
<span><span class="property">border</span>: 1px solid #aaa</span>
<span>}</span>
<span><span class="tagHTML"></style></span></span>
<span></span>
<span><span class="commentHTML"><!--HTML:--></span></span>
<span><span class="tagHTML"><div</span> <span class="attribute ">class</span>="<span  class="value">box</span>"<span class="tagHTML">></span>Блок c закруглённиями, с тенью у нижней и правой границы и тенью у текста.<span class="tagHTML"></div></span></span>

</code></pre>
													</td>
												</tr>
											</table>
										</div>

[psywalker]

Ага спасиб, чуть позже заценю.

[Yahoo!]

Ваще кууул!!! Избавился от этого громадного межстрочного расстояния! Надо было спану задать межстрочное расстояние равное высоте т.е. выровнить содержимое в нём по центру и родителю задать межстрочное расстояние 0.