Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > расстояние между дивами в эксплорере

Автор: yalo 23.5.2007, 09:44

почему-то в эксплорере появляются ненужные пробелы между плавающими блоками и не плавающим.. В FF и Oper'е все нормально. Такой код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>title</title>
<style type="text/css">
    .cont_corner {
      height: 23px;
      width: 229px;
      margin: 0px;
      padding: 0px;
    }
    .corner1 {
      float: left;
      background: url(img/left_corner.gif) left no-repeat;
      width: 33px;
      height: 23px;
      margin: 0px;
      padding: 0px;
    }
    .corner2 {
      float: right;
      background: url(img/right_corner.gif) right no-repeat;
      width: 27px;
      height: 23px;
      margin: 0px;
      padding: 0px;
    }
    .fon_rub {
        background: #F7F6F0;
        width: 169px;
        margin: 0px 27px 0px 33px;
        height: 23px;
      padding: 0px;
    }
</style>
</head>
<body>
            <div class="cont_corner">
                <div class="corner1"></div>
                <div class="corner2"></div>
                <div class="fon_rub"></div>
            </div>
</body>
</html>

Помогите, пожалуйста

Автор: SelenIT 23.5.2007, 12:51

yalo, это, увы, старый и печально известный http://www.positioniseverything.net/explorer/threepxtest.html.

Автор: yalo 23.5.2007, 13:49

то есть я так поняла (а понять было сложно из такого длинного текста на английском), этот баг напрямую не обойти, задав какое-нибудь стилевое свойство для дивов?

Автор: Uratsakidogi 23.5.2007, 15:50

Насколько я понял, достаточно сделать его http://msdn2.microsoft.com/en-us/library/ms533776.aspx. В той статье, например, для проблемного блока задают высоту 1%.

Автор: SelenIT 24.5.2007, 01:25

Uratsakidogi, если бы все было так просто... Кстати, 1% там задается вовсе не для проблемного блока, а для абзацев прилегающего к нему текста - чтоб сделать их блоковыми и избежать "ломания" строчек на уровне обрыва плавающего блока. А сам отступ регулируется margin-ами - другого, похоже, не дано... Так что hasLayout тут, увы, мимо.

yalo, Вам придется задать плавающим блокам margin-ы по -3px со стороны центрального блока (правый для левого блока и наоборот) только для IE - лучше всего через условные комментарии. Вот только я не знаю, как Вы состыкуете их в вышеприведенном примере: 163 + 33 + 27 дает 223px, никак не 229. Перед правым блока останется аж 6 пикселей зазора...

Кстати, в IE7 баг судя по всему исправлен, так что можно попробовать и хак через "* html"...

Автор: yalo 24.5.2007, 04:16

спасибо, SelenIT, теперь все понятно стало, а насчет 163 + 33 + 27, то это я описалась, там конечно должно быть 169, просто при 169 в эксплорере у меня вообще центральный блок переносился вниз, так как не помещался на одном уровне (содержащий три дива контейнер 169px), и я просто ради любопытства хотела узнать сколько же делает зазор IE и начала уменьшать 169px понемногу, пока разумеется не уменьшила как раз на 6 пикселей, то есть по 3 пиксела с двух сторон, чило вышло как раз 163, и все три блока "расположились" на одной линии, то есть я вычисляла вручную зазор, не зная о нем до этого вообще, а вернуть все на место в коде забыла, извините..

P.S. когда же я наконец полюблю английскую литературу по верстке и т.п...

P.P.S. кстати посмотрела свой пример, который написала в первом примере, сорри всем большое за него, он совсем не тот, то есть тот, но слегка косячный, в процессе поиска решения дергала самые разные значения и вводила дополнительные новые (авось поможет smile

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