Подрисуночная подпись, косяк в IE.

[DMGaster]

Здраствуйте, мне необходимо было сделать подрисуночную подпись в CMS Drupal которая располагалась бы справа или слева от рисунка. Я воспользовался советом. И вставил следующий код в файл style.css своей темы (немного измен?нная стандартная тема Garland):

.picFloatLeft {
 color: Black; /* Цвет подписи */
 padding: 10px; /* Поля вокруг содержимого */
 width: 600px; /* Ширина блока */
 margin: 2% 2% 1% 2%;
 text-align: justify;
}
.picFloatLeft img {
 float: left; /* Обтекание по правому краю */
 margin-right: 15px; /* Расстояние между рисунком и текстом */
}  
.picFloatLeft p {
 margin: 0px; /* Убираем отступы вокруг абзаца */
 padding-top: 10px; /* Поле  сверху */
} 
.picFloatLeft div {
 clear: left; /* Отменяем обтекание */
}

Код рисунка следующий:

<div class="picFloatLeft">
<img src="/files/u1/image048.gif" width="293" height="176" alt=""/></p>
<p>N+1-ая молекула (лишняя) взаимодействует с активатором и он теряет способность активировать посадку РНК-полимеразы на промотор.</p>
<div></div>
</div>

В итоге в Opera 9.23 я получил что и требовал

В IE опять какой то косяк, такое чувство что он не так как я понимает свойство float - помогите пожалуйста!

Вот файл style.cssисходной темы

И файл fix_ie.css той же темы

И ещ? в файерфоксе вс? выглядит абсолютно также как и в опере...

[klierik]

все нормально. так и должно быть.

создайте класс:

div.clear {clear:both;}

и после каждого блока ставте

<div class="picFloatLeft">
<img src="/files/u1/image048.gif" width="293" height="176" alt=""/></p>
<p>N+1-ая молекула (лишняя) взаимодействует с активатором и он теряет способность активировать посадку РНК-полимеразы на промотор.</p>
<div></div>
</div>
<div class="clear"></div>

возможно, в чем не уверен, поможет такое свойство:

.picFloatLeft {

color: Black; /* Цвет подписи */

padding: 10px; /* Поля вокруг содержимого */

width: 600px; /* Ширина блока */

margin: 2% 2% 1% 2%;

text-align: justify;

overflow: hidden;

}

[DMGaster]

klierik спасибо большое, буду знать ещ? один способ замучивания эксплорера... Сделал вс? как вы написали и получилось почти хорошо, только в эксплорере, опять, картинки прилипали друг к другу. Пришлось отдельно в файл fix-ie.css вставить следующий стиль:

div.pic_wrapper {
 height: 25px;
}

ну и соответственно конечный код выглядел как:

<div class="picFloatLeft">
<img src="/files/u1/image045.gif" width="369" height="155" alt=""/>
<p>В <strong>Аra-опероне E. сoli</strong> 3 цистрона, ...</p>
<div></div>
</div><div class="clearpic"></div><div class="pic_wrapper"></div>

Тогда вот вс? красиво и единообразно во всех браузерах...

Ещ? раз большое спасибо!