VPF::Проблемы в IE7 - Форум программистов

0Scrum

Дата 27.3.2011, 21:24 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Доброго дня, столкнулся с нерешаемой для себя проблемой.
Имеем:

Код


  * {
    border: 1px dotted orange;
  }
  html {
    font-size: 100.1%;
  }
  html, body {
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
  }
  body {
    font: 0.75em Arial, Helvetica, sans-serif;
  }

  #wrap {
    min-height: 100%;
    width: 1010px;
    background: url(images/body_bg.jpg) no-repeat;

    /********************************************************** for IE ********/
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.jpg', sizingMethod='scale'); /* bacground-size for IE 6-8*/
    /*******************************************************end for IE ********/

    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    margin: 0 auto;
    text-align: center;
    border-color: red;
  }

  /********************************************************** for IE **********/
  * html #wrap {

    height: 100%;  /* min-height for IE 6 */
  }
  /*******************************************************end for IE **********/

  #subwrap {
    min-height: 841px;
    min-width: 694px;
    margin: 78px 0;
    display: inline-block; /* for elastic width */
    text-align: left;
    padding: 0 23px;

    /********************************************************** for IE ********/
    *display: inline; /* display: inline-block for IE 6-7 */
    *zoom: 1;         /* HasLayer for activate inline-block IE 6-7 */
    _width: 694px;    /* min-width for IE 6 */
    _height: 841px;
    /*******************************************************end for IE ********/
  }
  #subwrap div {
    margin: 15px 0 0 0;
  }
  #subwrap * div {
    margin: 0;
  }
  #header {
    padding: 0 20px;
  }

    #header div {
      display: inline-block;
      border: none;
      min-width: 50%;
      min-height: 41px;

      /******************************************************** for IE ********/
      *display: inline; /* display: inline-block for IE 6-7 */
      *zoom: 1;         /* HasLayer for activate inline-block IE 6-7 */
      _width: 50%;    /* min-width for IE 6 */
      _height: 41px;
      /*****************************************************end for IE ********/
    }
    #header #club {
    }
    #header #award {
      text-align: right;
    }

Код


<body>
    <div id="wrap">
        <div id="subwrap">
            <div id="header">
                <div id="club">Club</div><!--
                --><div id="award">Award</div>
            </div>
        </div>
    </div>
</body>

Проблема заключается в том что 7 осел берет процентное значение не от родителя если имеет тип inline-block.
Все остальные ведут себя хорошо.
Как можно побороть ослика ?
Не желающим вникать в верстку готов ответить на наводящие вопросы.

Cobalt

Дата 28.3.2011, 13:41 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 124
Регистрация: 31.8.2006

Репутация: нет
Всего: 1

http://htmlbook.ru/css/display

--------------------

Стоишь на берегу И чувствуешь соленый запах ветра, Что веет с моря,И знаешь что свободен ты, и жизнь лишь началась....И губы жжет.. подруги поцелуй, Пропитанный слезой!

0Scrum

Дата 28.3.2011, 19:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Цитата(Cobalt @ 28.3.2011, 13:41)

http://htmlbook.ru/css/display

Данная информация не способствует решению проблемы.

mcTep

Дата 28.3.2011, 20:54 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Что вы хотите получить? Какой элемент проблемный?

0Scrum

Дата 28.3.2011, 21:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Цитата(mcTep @ 28.3.2011, 20:54

)

Что вы хотите получить?

1.Два inline-block элемента занимающие 50 процентов от минимальной ширины родителя имеющего так же значение inline-block.
2.Неординарное решение данной проблемы, выходящее за грани моего понимания.

Цитата(mcTep @ 28.3.2011, 20:54

)

Какой элемент проблемный?

Проблемных элементов нет, есть некорректная работа 7 ослика в том что дети имеющие значение inline-block неправильно берут процентное значение ширины/минимальной ширины от минимальной ширины родителя.

mcTep

Дата 28.3.2011, 21:56 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

А доктайп прописан?

С таким

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

У меня ваш пример везде одинаково выглядит.

Cobalt

Дата 29.3.2011, 10:02 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 124
Регистрация: 31.8.2006

Репутация: нет
Всего: 1

пардон, думал что неясно что именно за глюк в 7)

--------------------

0Scrum

Дата 29.3.2011, 11:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Цитата(mcTep @ 28.3.2011, 21:56)

А доктайп прописан?

С таким

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

У меня ваш пример везде одинаково выглядит.

Да, присутствует именно такой как указан у вас.
Если нетрудно, сделайте два скрина ie7 и ff.

Спасибо.

mcTep

Дата 29.3.2011, 16:31 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Я ощибся.. smile

У меня оказывается восьмой ИЕ.

Для ИЕ7 строчка "_width: 694px;" не работает. Она только для ИЕ6. Если вы хотите для ИЕ7 и ИЕ6 лучше использовать "width: 694px !ie;"

Тут можно посмотреть все хаки: http://www.xiper.net/collect/html-and-css-.../css-hacks.html.

Насколько мне известно min-width в ИЕ7 работает.

0Scrum

Дата 29.3.2011, 19:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Цитата

Для ИЕ7 строчка "_width: 694px;" не работает. Она только для ИЕ6.

Это можно было увидеть из моих комментариев расположенных в стилях smile

что подразумевает умышленное применение именно этого хака.

Цитата

Если вы хотите для ИЕ7 и ИЕ6 лучше использовать "width: 694px !ie;"

Предпочитаю (*)

Цитата

Насколько мне известно min-width в ИЕ7 работает.

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

На данный момент использую четко заданную минимальную ширину для блоков, а хотелось бы использовать процентное значение.

mcTep

Дата 29.3.2011, 20:50 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Локализуйте проблему в коде, пожалуйста. Уберите лишнее. Будет проще понять.

Это сообщение отредактировал(а) mcTep - 29.3.2011, 20:52

mcTep

Дата 29.3.2011, 22:06 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Вот так у меня везде все работает.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <style type="text/css">


        </style>
    </head>
    <body>
        <div style="width:50%; min-width:500px; border:1px solid red; display:inline-block">
            <div style="width:50%; min-width:100px; border:1px solid green; display:inline-block">
                asd
            </div>
        </div>
    </body>
</html>

0Scrum

Дата 30.3.2011, 15:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Цитата

Локализуйте проблему в коде, пожалуйста. Уберите лишнее. Будет проще понять.

Да собственно нечего локализовывать, все блоки взаимосвязаны что бы показать общую концепцию идеи.

Цитата

HTML

Вы немного неправильно поняли смысл поставленной мной задачи.
Я использую min-width не для ограничения при сужении экрана, а для возможности расширения. т.е. наоборот.
Попробую синхронизировать наши мысли.

Мне необходимо получить возможность того что бы внутренние блоки имели возможность расширения по ширине, к примеру при увеличение шрифта, НО расширение не должно превышать определенной ширины.
Итого:
1.Wrap - Жестко фиксированный элемент имеющий жестко заданное значение ширины. width:1000px;
2.Subwrap - Элемент который имеет возможность расширения до элемента Wrap. min-width: 500px;display: inline-block;
3.Header (на рисунке не отражен) - элемент родитель который имеет детей с шириной значение который указано в процентах. Это необходимо для того что бы все элементы находящиеся в элементе Subwrap расширялись в случае расширения одно из блоков.

Примерная схема расположения блоков.

p.s. Стоит отметить вашу настойчивые попытки решить оную проблему. smile

mcTep

Дата 30.3.2011, 20:08 (ссылка)

(голосов:1)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Если в одной из колонок в хидере будет много текста, то она сместит второй соседний див. Так и надо разве?

0Scrum

Дата 30.3.2011, 20:36 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Цитата(mcTep @ 30.3.2011, 20:08)

Если в одной из колонок в хидере будет много текста, то она сместит второй соседний див. Так и надо разве?

Вообще то нет. Если честно то такое положение не рассматривал, хотя стоило бы.

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

Видимо придется отказаться от данной затеи и перейти к жестко фиксированным указанием ширины + мягкие переносы для монолитного текста.

mcTep Вам отдельное спасибо за наводку.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »