Проблемы с позиционированием текста в direction=rtl

TNL · №1

Не нашел где здесь можно прикрепить файл, поэтому привожу код ниже.
Соответственно не могу привести и скриншоты.
Вопрос такой. С помощью CSS отображаем дерево. В ltr режиме все нормально. Поставлена задача изменить стили, чтобы все работало и в rtl режиме. Код ниже решает эту задачу в IE (правда там есть свой глюк - искажение иконки, если кто-то подскажет как его победить тоже буду рад). В Mozilla текст позиционируется не так как ожидалось: вместо того, чтобы уйти от правой границы блока (блок о котором я говорю выделен красной границей) влево в скроллируемую область, текст выравнивается по левой границе блока с прокруткой и размещается вправо перекрывая иконку. Заметил, что если задать стиль float: right внутренним блокам, то текст размещается как ожидается, но пропадает нижняя полоса прокрутки (плюс появляются другие проблемы из-за которых далее в этом направлении двигаться не стал).
Нужно чтобы текст размещался также, как если открыть приведенный ниже код в IE.
Как можно решить проблему средствами CSS?

Собственно код:

Выделить код

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
HTML {
	direction: rtl;
}

table {
	font-size: 11px;	
}
 

.tree {
	width: 200px;
	height: 100%;
	overflow: auto;
	
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

.tree DIV,
.tree DIV DIV {
	margin: 2px 0px 2px 0px;
}

.tree DIV {
	margin: 5px;
	padding: 0px;
}

.tree DIV SPAN {
	display: block;
	margin: 2px 0px 2px 0px;
	padding: 0px 35px 0px 0px;
	background-position: top right;
	background-repeat: no-repeat;
	background-image: url(folder.gif);

}

.tree DIV SPAN SPAN {
	margin-right: -20px;
}

.tree DIV SPAN P {
	color: navy;
	white-space: nowrap;
	padding: 0px 5px 1px 5px;
	margin: 0px;
	font-weight: normal;
border: solid 1px red;
}

</style>
</head>
<body>
<form id="f" method="post" action="content.jsf" enctype="application/x-www-form-urlencoded">
<div style="height: 489px;" class="tree" tabindex="0">
	<div>
		<span>
			<p>Repository Connections</p>
			<div>
				<span>
					<p>Bankdemo</p>
				</span>
				<span>
					<p>Connection to tnl</p>
				</span>
				<span>
					<p>boa</p>
				</span>
				<span>
					<p>Dog</p>
				</span>
			</div>
		</span>
		<span>
			<p>JDBC Libraries</p>
			<div>
				<span>
					<p>Sun JDBC-ODBC Driver</p>
				</span>
				<span>
					<p>DB2 JDBC Driver</p>
				</span>
				<span>
					<p>firebird</p>
				</span>
				<span>
					<p>Oracle Driver</p>
				</span>
			</div>
		</span>
		<span>
			<p>Repositories</p>
			<div>
				<span>
					<p>jdbc:db2://dog:50000/english</p>
					<div>
						<span>
							<p>English</p>
						</span>
						<span>
							<p>New Repository</p>
						</span>
						<span>
							<p>Secured</p>
						</span>
						<span>
							<p>tnl</p>
						</span>
					</div>
				</span>
				<span>
					<p>jdbc:db2://vilves.rocketsoftware.com:50000/bankdemo</p>
					<div>
						<span>
							<p>DebbyInternalSecurity</p>
						</span>
						<span>
							<p>Debbytest</p>
						</span>
						<span>
							<p>New Repository</p>
						</span>
						<span>
							<p>bankdemo</p>
						</span>
					</div>
				</span>
				<span>
					<p>jdbc:oracle:thin:@data:1521:ORACLE</p>
				</span>
			</div>
		</span>
		<span>
			<p>Log Settings</p>
		</span>
	</div>
</form>
</body>
</html>

Al_H · №2

Выделить код

Код:

<div class="tree" tabindex="0">

(убираем style=)
Теперь в стилях:

Выделить код

Код:

.tree {min-height: 489px; overflow: hidden;}
/* Hide from Mac IE \*/
.tree {overflow: auto;}
/* */
* html .tree {height: 489px;}

Теперь можно делать float.
Или это не то, что было нужно?

Unghost · №3

TNL

Не нашел где здесь можно прикрепить файл, поэтому привожу код ниже.
Соответственно не могу привести и скриншоты.

http://forum.mozilla.ru/uploads.php

TNL · №4

Спасибо. Вот линки на скриншоты, чтобы было понятнее о чем я говорю.
Вот как выглядит пример в Mozilla:
http://forum.mozilla.ru/uploaded/rtl_moz2.jpg
А вот как он выглядит в IE:
http://forum.mozilla.ru/uploaded/rtl_ie1.jpg.

Я хочу добиться, чтобы под Mozilla он выглядел также как в IE, причем чтобы код для обоих браузеров был по возможности один.

Если сравнить рисунки, то видно, что IE увеличивает ширину блока <p> (выделен красной границей) под ширину текста. При этом непомещающаяся часть текста и блока скрывается в области прокрутки.

Mozilla же не дает левой границе блока <p> уйти левее границы контрола (в область прокрутки). А непомещающаяся часть текста "вылазит" справа. Вот это я и хочу победить. А заодно узнать, почему Mozilla ведет себя именно так. Ведь в режиме ltr в обоих браузерах поведение в этой части одинаково.

Задав

.tree DIV SPAN {
/* ... */
float: right;
clear: both;
}

я могу добиться того, что текст располагается как нужно, но это не совсем то, так как многие другие стили "съезжают", особенно под IE. И вообще, float мне здесь только мешает. Упомянул я об этом только потому, что это пока единственный способ, которым мне удалось хоть как-то повлиять на расположение текста в блоке. Возможно более знающих людей это как-то сориентирует, и мне быстрее дадут подсказку

Полезная информация

№105-05-2006 15:49:29