Mozilla, direction, float и <li> (Карамба, спасай!) @ DeForum.ru

Столкнулась с непонятной проблемой в Мозилле.

Есть див с фиксированной шириной. В нем есть список. Слева сверху внутри текста списка должна быть картинка (или текст). И главное - направление ВСЕЙ страницы должно быть справа налево. В Мозилле список едет вправо на ширину дива... Если вместо списка вставляешь параграфы или дивы - этого не происходит.

Я совершенно не понимаю, в чем причина и как это исправить. Хоть мало кто сталкивался с направлением страницы, может в чем-то сможете мне подсказать...

Код:

<body style="direction: rtl;">
<div style="width: 300px;">   
      <div style="float: left;color:#FF0000;">this text is floated<br />this text is floated<br />this text is floated<br /></div>
      <ol>
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>         
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>
      </ol>
</div>
</body>

Спасибо зараннее

Лампочка,

Код:

<body style="direction: rtl;">
<div style="width: 300px; border:1px solid red;">   
   <div style="float: left;color:#FF0000;">
      this text is floated<br />
      this text is floated<br />
      this text is floated<br />
   </div>
   <ol style="clear:both;">
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>         
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li>
      </ol>
</div>
</body>

т.е. или
<ol style="clear:both;">

или
<ol style="float:right;">
и перед закрытием внешнего контейнера
<div style="clear:both;"></div>

karamba писал(а):

и перед закрытием внешнего контейнера
<div style="clear:both;"></div>

есть кста универсальный сброс без доп.элемента с клиром. Оч. полезная штука:

Код:

.clear:after {
   content: "."; 
   display: block;
   margin: 0;
   padding: 0;
   clear: both; 
   visibility: hidden;
}
.clear {
   display: inline-block;
}
* html .clear {
   height: 1%;
}
.clear {
   display: block;
   clear: both;
}

т.е. в твоем случае достаточно, имея этот класс, написать
<ol class="clear" style="float:right;">
без дополнительного
<div style="clear:both;"></div>
в конце

karamba,

karamba, я дико извиняюсь - допустила неточность в коде. Текст по идее должен быть на всю ширину контейнера и "огибать" картинку или текст, который слева... КОгда ставишь <ol style="float:right;"> и перед закрытием внешнего контейнера <div style="clear:both;"></div>, в случае длинного текста, он просто переносится вниз

Код:

<body style="direction: rtl;"> 
<div style="width: 300px; border:1px solid red;">    
   <div style="float: left;color:#FF0000;"> 
      this text is floated<br /> 
      this text is floated<br /> 
      this text is floated<br /> 
   </div> 
   <ol style="float:right;"> 
         <li>This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag</li>          
         <li>This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag</li> 
         <li>This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tagli> 
         <li>This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag</li> 
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li> 
         <li>This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br />This text is in "li" tag<br /></li> 
      </ol>
<div style="clear:both;"></div>  
</div> 
</body> 

Лампочка, чесно? Ничё не понял…
Пронумеруй, назначь айдишки блокам, и скажи, какой блок себя как должен вести…

Ой, прости. и вообще, спасибо огромное за внимание :oops:

Сделала код максимально понятным. В принципе, просто посмотри в ИЕ, там работает, как надо: есть контейнер 0 с заданной шириной, в котором есть список 3, который должен располагаться на всю ширину контейнера 0. Блок 1 - это текст или картинка, которая вставляется слева внутрь списка 2, т.е. текст списка 2 огибает блок 1. Опять же, во всех браузерах работает как надо, а в Мозилле список 2 едет вправо. Если вместо списка ol вставлять дивы или параграфы, ничего никуда не едет. И если направление странице не задавать, тоже все нормально. По-моему, просто баг Мозиллы...

Код:

<body style="direction: rtl;"> 
<div id="0" style="width: 300px; border:1px solid red;">    
   <div id="1" style="float: left;color:#FF0000;"> 
      this text is floated<br /> 
      this text is floated<br /> 
      this text is floated<br /> 
   </div>  
   <ol id="2"> 
         <li>This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag</li>          
         <li>This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag This text is in "li" tag</li>         
      </ol> 
</div> 
</body>

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

я кажется понял, что тебе нужно.
Похоже в ФФ (остальные не проверял) не удастся реализовать такую конструкцию. Текст-то выводится «rtl», но границы блоков остаются «ltr», т.е. левая граница <li> остается там же, а текств ней выводится наоборот, соот. флоат сдвигает весь блок <li>, поскольку плавает со стороны его физической и фактической левой границы, которая типа стала справа ))
Такая хрень только со списками наболюдается, параграф ведет себя адекватно )

Лампочка,
синхронное плавание ))

Ну вот, так и знала, что баг. Придется в параграфе циферки проставлять :chih:

karamba,

Лампочка, ну или переносить плавающий блок внутрь первого <li> и назначать им флоат:райт.
Кривовато и не универсально, это первое, что пришло Наум )

повтор

karamba, ого, работает! А по поводу универсальности, напишу программисту, мол так и так.

DeДверь
Логин:
Пароль:
	Автологин