1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Установка и настройка

css float left в ноде и глюк в IE

Главные вкладки

Аватар пользователя Valeratal Valeratal 18 марта 2007 в 23:48

Добрый день, подскажите пожалуйста
Почему то у меня в FF плавающий блок в ноде отображается нормально, а в IE это плавающий блок как бы немногов вниз съезжает и перекрывает часть текста
http://www.hr-portal.ru/2/node/37
Подскажите , в чем может быть проблема?

P.S. Тема ZEN

Комментарии

Аватар пользователя Dan Dan 19 марта 2007 в 0:47

Ну тебе просто повезло!
Обычно ещё в Опере вверх уезжает Smile

Если серъёзно, то надо смотреть код. А ты попробуй посмотреть на свой блок плагином firebug для окнелиса.

Аватар пользователя alexweb alexweb 19 марта 2007 в 5:04
  • Возможно, дело в позиционировании. Так как блок позиционирован как relative, то на мой взгляд неплохо бы поставить для родительского блока position: absolute
  • Еще такая проблема может возникнуть, когда сумма ширины вложенных блоков, один из которых(или оба) имеют float, превышает ширину родительского контейнера
Аватар пользователя Valeratal Valeratal 19 марта 2007 в 11:17

проблема скорее не в ширине - так как в ширину все как раз нормально. А вот в высоту

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

Аватар пользователя sashka sashka 19 марта 2007 в 14:21

Если всё верстается в притык, то есть очень точно, с точностью до 1 пкс,- надо стравливать паддинги и марджины, осторожно проинспектировать код.
Если поможет:
glish.com : CSS layout techniques
http://www.glish.com/css/
И обязательно IEDevToolBar - жалкое подобие DOM Inspector, адрес не помню.

Аватар пользователя Valeratal Valeratal 19 марта 2007 в 17:40

спасибо за ссылку

По поводу как верстается - да вот не знаю, у друпальцев даже в такой простой темы столько дивов наворочено, что без 100 гр. не разберешься.

У меня просто div float right с шириной 30%

То есть высоту я по идее не трогаю вообще.

Сегодня проверю одну гипотезу - дело в том что это вывод рекламы директа - в директе выводятся таблица - в темах друпала друпальцы любят css-сить таблицы

То же и с параграфами.

Аватар пользователя sashka sashka 19 марта 2007 в 20:01

Див или таблица: вот в чём вопрос...
А вот мы все заморачиваемся по вёрстка, а IE7 между тем набирает обороты Sad
...

Аватар пользователя Valeratal Valeratal 19 марта 2007 в 22:34

нашел в CSS темы

.comment .picture, .node .picture
float:left;
margin-right:15px;

удалил .node и добавил к свойствам моего блока position relative

и все заработало

Пойду напьюсь Smile

P.S. и чего это стиль нода был плавающим....

Аватар пользователя Sergey1 Sergey1 4 апреля 2008 в 8:06

У меня схожая проблема. Пытаюсь приколотить панель регистрации в строку меню и форму поиска туда же, делаю все флоатами. В FF и других Strict-браузера все отображается отлично, а вот в IE6 - безбожно разъезжается (в особенности - форма поиска). Page.tpl.php выводит следующий стандартный HTML для формы поиска:

<span class="login-search">
<div><a href="/user/login">Login</a>/<a href="/user/register">Sign up</a></div><form action="/search/node"  accept-charset="UTF-8" method="post" id="search-theme-form">
<div>  <input type="submit" name="op" id="edit-submit" value="Search"  class="form-submit" />
  <div class="form-item">
 <input type="text" maxlength="128" name="search_theme_form_keys" id="edit-search-theme-form-keys"  size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
</div>

  <input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form"  />

</div></form>
</span>

Спан login-search я сам добавил, чтобы все в одной строчке (меню) было.

CSS (рабочий в FF) выглядит так:

/*общая форма для логина и поиска*/
.login-search {float:right; width:30%;}

/*форма логина*/
.login-search div {float:left; width:30%; height:12px;}
/*форма поиска*/
.login-search #search-theme-form {float: right; width: 70%}
.login-search #search-theme-form div {float: right; width: 100%}

/*кнопка*/
.login-search #search-theme-form div .form-submit {float: right; width:30%}
/*поле*/
.login-search #search-theme-form div .form-item {width:70%; float:left; position:relative; top:-13px;}
.login-search #search-theme-form div .form-item .form-text {width:100%; float:left;}

В итоге получаем отличную картинку в FF (см FF.bmp) - Ваша проблема решается с помощью position:relative; top:-13px; А вот в IE6 все отвратительно (IE6.bmp). Второй день ломаю голову, чем это может быть вызвано и как исправить....