Прошу помощи!

[Kiosuki]

Собственно, есть такой кусок кода:

#main {
****height: 20px;
****display: table;
****width: 100%;****
}

#main div{
****display: table-cell;
}

#first {
****width: 300px;
}

#second {
****width: 100px;
}

#third input {
****width: 100%;
}

#fourth {
****width: 70px;
}

<div id="main">
****<div id="first">FIRST</div>
****<div id="second">SECOND</div>
****<div id="third">
 *<input name="a" />
****</div>
****<div id="fourth">FOURTH</div>
</div>

Но есть одно НО! Все вышеописанное корректно отображается в "нормальных" браузерах - во всех, кроме IE. Смысл сего кода таков, что внутри определенного блока (main, шириной 100%) находится 4 блока, причем у 3 из них фиксированная ширина, у одного - нет (плавающая). Т.е. этот вот самый блок с плавающей шириной должен быть равным по ширине 100% - суммарная ширина блоков с фиксированной шириной. Кроме этого, по всей ширине "плавающего" блока должна быть <input>, причем тоже плавающая. Так вот, в FF, Opera, NN это отображается корректно. В IE - нет. Как заставить IE показать то, что необходимо?

Спасибо.

[Zigzag]

IE 6.0 и ниже не обрабатывает

display: table/table-cell

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

[Aykroyd]

К сожалению, с display: table; и display: table-cell в IE совсем плохо...
Так что, на мой взгляд, только флоатами данную конструкцию можно заставить отображаться правильно и кроссбраузерно...

Блоки с фиксированной шириной можно зафлоатить, а "резиновый" блок с инпутом можно оставить в прямом потоке с соответствующими отступами...

[Kiosuki]

Всем больше спасибо. Выход найден с использованием в css хаков для IE и expression от Java Script. Позднее, когда проект обретет вид хоть немного похожего на сайт - выложу ссылку, можно будет оценить решение.

Originally posted by Zigzag@Feb 26 2007, 14:03
IE 6.0 и ниже не обрабатывает

display: table/table-cell

потому все так съезжает, а что вы пытаетесь такой конструкцией разметки изобразить в браузре? для меня это какая-то загадка...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

Не совсем мне понятно, что для вас является загадкой? Какие у вас замечания по поводу конструкции?

[Zigzag]

Originally posted by AVDesign@Feb 26 2007, 19:01
Не совсем мне понятно, что для вас является загадкой? Какие у вас замечания по поводу конструкции?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

не понятно, что именно вы пытаетесь сверстать, это вы так таблицу имитируете?

[Kiosuki]

Originally posted by Zigzag@Feb 26 2007, 21:27
не понятно, что именно вы пытаетесь сверстать, это вы так таблицу имитируете?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Допустим, да. Это не таблица, как таковая, а элемент дизайна в виде таблицы. Какие-то будут комментарии?

Кстати, кто-либо сталкивался с тем, что IE отображает элемент <div style="height: 15px;"></div> высотой не 15, а 18 пикселей? Но иногда у IE получается и верно отобразить подобный <div>. До сих пор не могу разобраться в каких случаях это происходит, и от чего зависит "правильность" отображения. Подскажите, пожалуйтса.

[Aykroyd]

Originally posted by AVDesign@Feb 27 2007, 12:56
Допустим, да. Это не таблица, как таковая, а элемент дизайна в виде таблицы. Какие-то будут комментарии?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Комментарии, наверное, могут быть такие, что элемент дизайна в виде таблицы можно спокойно реализовать и без display: table/table-cell, дабы не вводить в искушение любимый всеми браузер...

Originally posted by AVDesign@Feb 27 2007, 12:56
Кстати, кто-либо сталкивался с тем, что IE отображает элемент <div style="height: 15px;">

высотой не 15, а 18 пикселей? Но иногда у IE получается и верно отобразить подобный <div>. До сих пор не могу разобраться в каких случаях это происходит, и от чего зависит "правильность" отображения. Подскажите, пожалуйтса.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>[/quote]
1. Какой !DOCTYPE используете?
2. Что содержится в этом блоке?

[Kiosuki]

Originally posted by Aykroyd@Feb 27 2007, 12:09
Комментарии, наверное, могут быть такие, что элемент дизайна в виде таблицы можно спокойно реализовать и без display: table/table-cell, дабы не вводить в искушение любимый всеми браузер...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Если Вы намекаете на float: *;, в таком случае я вам скажу, что с оторбражением указанного свойства весьма серьезные проблемы у FF. Посему, приходится выбирать из 2 зол лучшее, а в нашем случае - легче.

Originally posted by Aykroyd@Feb 27 2007, 12:09
1. Какой !DOCTYPE используете?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "***">

Originally posted by Aykroyd@Feb 27 2007, 12:09
2. Что содержится в этом блоке?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Ничего. Он пуст. В том-то и дело. Чтоб долго не рассказывать, я сделал пример:

temp.avdesign.in.ua (это ссылка на него, в виде ссылки выложить не могу - не набрал еще тут 10 сообщений)

Сделайте скрин экрана в том же FF и в IE. Поочередно вставьте картинку в любой графический редактор и измеряйте высоту черной полосы. У меня как в 6 так и в 7 IE полоска отображается высотой 19 (хотя должна 15) пикселей. В остальный браузерах - полный порядок. Что Вы на это скажете?

[Aykroyd]

Originally posted by AVDesign@Feb 27 2007, 16:55
Если Вы намекаете на float: *;, в таком случае я вам скажу, что с оторбражением указанного свойства весьма серьезные проблемы у FF. Посему, приходится выбирать из 2 зол лучшее, а в нашем случае - легче.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Гы... (простите, эмоции)...
Очень хотелось бы узнать, какие именно серьезные проблемы у FF с флоатами.
Пожалуйста, просветите.

Originally posted by AVDesign@Feb 27 2007, 16:55
Сделайте скрин экрана в том же FF и в IE. Поочередно вставьте картинку в любой графический редактор и измеряйте высоту черной полосы. У меня как в 6 так и в 7 IE полоска отображается высотой 19 (хотя должна 15) пикселей. В остальный браузерах - полный порядок. Что Вы на это скажете?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Для того, чтобы это увидеть, совсем не обязательно измерять высоту в графическом редакторе. Это видно невооруженным глазом. Сейчас разберемся.

[Aykroyd]

Уж так в IE заведено, что высота блока не может быть меньше, чем размер шрифта текста, который теоретически в этом блоке может присутствовать (в Вашем случае – размер шрифта по умолчанию). Если этот блок нужен Вам пустым – назначьте для него, например, font-size: 1px, и будет Вам счастье...

[Zigzag]

Originally posted by AVDesign+Feb 27 2007, 10:56--><div class='quotetop'>Цитата(AVDesign @ Feb 27 2007, 10:56)</div>

Допустим, да. Это не таблица, как таковая, а элемент дизайна в виде таблицы. Какие-то будут комментарии?[/b]

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

<!--QuoteBegin-AVDesign@Feb 27 2007, 10:56
Кстати, кто-либо сталкивался с тем, что IE отображает элемент <div style="height: 15px;">

высотой не 15, а 18 пикселей? Но иногда у IE получается и верно отобразить подобный <div>. До сих пор не могу разобраться в каких случаях это происходит, и от чего зависит "правильность" отображения. Подскажите, пожалуйтса.[/quote]

разные доктайпы?

Originally posted by AVDesign+Feb 27 2007, 14:55--><div class='quotetop'>Цитата(AVDesign @ Feb 27 2007, 14:55)</div>

Если Вы намекаете на float: *;, в таком случае я вам скажу, что с оторбражением указанного свойства весьма серьезные проблемы у FF. Посему, приходится выбирать из 2 зол лучшее, а в нашем случае - легче.[/b]

вот уж нонсенс! как раз именно у FF нет таких проблем!

<!--QuoteBegin-AVDesign@Feb 27 2007, 14:55
Ничего. Он пуст. В том-то и дело. Чтоб долго не рассказывать, я сделал пример:

temp.avdesign.in.ua (это ссылка на него, в виде ссылки выложить не могу - не набрал еще тут 10 сообщений)

Сделайте скрин экрана в том же FF и в IE. Поочередно вставьте картинку в любой графический редактор и измеряйте высоту черной полосы. У меня как в 6 так и в 7 IE полоска отображается высотой 19 (хотя должна 15) пикселей. В остальный браузерах - полный порядок. Что Вы на это скажете?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

не используйте пока вот эту запись для IE6, она сразу выкидывает его в quirks mode и дальше предсказать поведение браузера сложно.

<?xml version="1.0" encoding="Windows-1251"?>

а вот баг с IE интересный, решение где-то рядом, но что-то никак не могу понять, в чем дело?

[Zigzag]

Originally posted by Aykroyd@Feb 27 2007, 17:07
Уж так в IE заведено, что высота блока не может быть меньше, чем размер шрифта текста, который теоретически в этом блоке может присутствовать (в Вашем случае – размер шрифта по умолчанию). Если этот блок нужен Вам пустым – назначьте для него, например, font-size: 1px, и будет Вам счастье...*
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

емое =)) точно высота строки, по дефолту 16px шрифт, вот еще и по одному пикселу, для полной высоты, итого 18px

[Kiosuki]

Originally posted by Aykroyd@Feb 27 2007, 17:58
Гы... (простите, эмоции)...
Очень хотелось бы узнать, какие именно серьезные проблемы у FF с флоатами.
Пожалуйста, просветите.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Не смешно. Просвещать не буду, а если есть желание, сделайте флоат-блок определенной ширины с фоновым изображением. Внурь него поместите блок без флоата. Просмотрите в FF.

Originally posted by Aykroyd@Feb 27 2007, 17:58
Для того, чтобы это увидеть, совсем не обязательно измерять высоту в графическом редакторе. Это видно невооруженным глазом. Сейчас разберемся.*
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
У Вас, должен сказать, неимоверно точный глазомер (или 640*480 :biggrin2: ). Эх, нужно было делать не 15px, а, скажем, 150 :biggrin2:

Originally posted by Aykroyd@Feb 27 2007, 18:07
Уж так в IE заведено, что высота блока не может быть меньше, чем размер шрифта текста, который теоретически в этом блоке может присутствовать (в Вашем случае – размер шрифта по умолчанию). Если этот блок нужен Вам пустым – назначьте для него, например, font-size: 1px, и будет Вам счастье...*
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
А вот за это действительно спасибо Неизвестно сколько бы еще так мучаться пришлось Несколько раз приходилось на этой почве неимоверные извращения создавать. Ну... Все что бы не делалось - к лучшему.

[Kiosuki]

Originally posted by Zigzag@Feb 27 2007, 18:28
вставьте картинку фоном и не плодите такую разметку, только чтобы сделать элемент дизайна. уверен, что без этого можно обойтись.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
А если нельзя? Вы, как мне кажется, хотите легкого, но не красивого решения проблемы.

P.S. Уважаемые собеседники, а тут еще кто-то кроме вас двоих имеет свое мнение?

[Aykroyd]

Originally posted by AVDesign@Feb 27 2007, 20:23
Не смешно. Просвещать не буду, а если есть желание, сделайте флоат-блок определенной ширины с фоновым изображением. Внурь него поместите блок без флоата. Просмотрите в FF.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Да нет уж, будьте так добры, просветите.
Сделал. Поместил. Посмотрел. Всё идеально.

Originally posted by AVDesign@Feb 27 2007, 20:23
У Вас, должен сказать, неимоверно точный глазомер (или 640*480* :biggrin2: ). Эх, нужно было делать не 15px, а, скажем, 150* :biggrin2:
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Не жалуюсь.

Originally posted by AVDesign@Feb 27 2007, 20:24
А если нельзя? Вы, как мне кажется, хотите легкого, но не красивого решения проблемы.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Почти всегда можно. И семантически нужно.
И нет тут вообще никакой проблемы, чтобы что-то решать.
А красивые решения – это и есть семантически правильные решения...

Originally posted by AVDesign@Feb 27 2007, 20:24
P.S. Уважаемые собеседники, а тут еще кто-то кроме вас двоих имеет свое мнение?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Еще как имеет.

[Zigzag]

Originally posted by AVDesign+Feb 27 2007, 18:23-->

Не смешно. Просвещать не буду, а если есть желание, сделайте флоат-блок определенной ширины с фоновым изображением. Внурь него поместите блок без флоата. Просмотрите в FF.

а что именно не так у вас?

<!--QuoteBegin-AVDesign@Feb 27 2007, 18:24
[b]А если нельзя? Вы, как мне кажется, хотите легкого, но не красивого решения проблемы.

отнюдь! я лишь советую упростить решение проблемы и не забыть при этом о семантике кода.

[Kiosuki]

Originally posted by Aykroyd@Feb 27 2007, 21:16
Да нет уж, будьте так добры, просветите.*
Сделал. Поместил. Посмотрел. Всё идеально.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
C превеликим удовольствие просвещу. Кроме того, сделаю скрины. Господа, я понимаю, что еще на форуме у меня нет никакого авторитета, но извините, в этой области я работаю не первый и не второй год. Так что, будте добры... Пожалуйста: temp.avdesign.in.ua/test.html И так, что же мы тут видим? Давайте-ка проанализиируем. Оставим в покое горемычный IE - мучение всех веков и народов. Не будем, так же, останавливаться на Опере. Здесь, как видите, проблем особых тоже нету. Можно даже сказать, что Опера данную страницу отображает идеально-корректно. Перейдем же к FF. Как видим, кроме того, что последний флоатированный <input> не относит ко внутреннему контейнеру <div> (<div> выстраивается по высоте текста), так еще и <input type="submit"> выглядит как "обрезанная" калека. Пожалуйста: [attachment=5566:attachment]
Хорошо, хорошо... Вы скажете, что нужно <input> ставить в начале, а уже текст - за ним. И это тоже мы проходили: temp.avdesign.in.ua/test_a.html [attachment=5567:attachment]
И это отнюдь не единственный пример. Просто в данный момент я столкнулся с ним, поэтому и привел его вам. Может я не верно ставлю вопрос. Возможно, я не понимаю всех тонкостей блочной верстки, и на самом деле приведенный код верно отображает именно FF, а остальные браузеры - нет?
Вот так вот, многоуважаемые, господа. Т.е. тут уже есть смысл нам с вами говорить о количестве опыта работы над блочной версткой. Или я не прав?

[Aykroyd]

Мда... Беда прям...

Originally posted by AVDesign@Feb 28 2007, 12:53
C превеликим удовольствие просвещу.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]К сожалению, просветить у Вас не получилось. И посему просвещать сейчас буду я.

ЗАБЛУЖДЕНИЕ ПЕРВОЕ:

Originally posted by AVDesign@Feb 28 2007, 12:53
Господа, я понимаю, что еще на форуме у меня нет никакого авторитета, но извините, в этой области я работаю не первый и не второй год. Так что, будте добры...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]Никто и никогда на данном форуме и не думал умалять Ваши знания и опыт, не пытался ставить себя выше Вас и ничуть не сомневался в Вашем профессионализме.
Но теперь, к сожалению, из-за Вашего последнего поста есть повод для сомнений... Приведенный Вами пример говорит об элементарном непонимании азов блочной модели...

ЗАБЛУЖДЕНИЕ ВТОРОЕ:

Originally posted by AVDesign@Feb 28 2007, 12:53
Не будем, так же, останавливаться на Опере. Здесь, как видите, проблем особых тоже нету. Можно даже сказать, что Опера данную страницу отображает идеально-корректно.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]Эх... Едрить-колотить...
1. Скачиваем нормальную, последнюю версию Оперы 9.10, которая идеально-корректно ( ) отображает блочную модель наряду с FF.
2. Открываем в ней Ваш пример.
3. Убеждаемся, что Опера ведет себя и отображает все точно так же, как и FF, а именно:
<div class='quotetop'>Цитата</div>

последний флоатированный <input> не относит ко внутреннему контейнеру <div> (<div> выстраивается по высоте текста), так еще и <input type="submit"> выглядит как "обрезанная" калека.[/b]

Идеально корректно Вы говорите?

ЗАБЛУЖДЕНИЕ ТРЕТЬЕ:

Originally posted by AVDesign@Feb 28 2007, 12:53
Перейдем же к FF. Как видим, кроме того, что последний флоатированный <input> не относит ко внутреннему контейнеру <div> (<div> выстраивается по высоте текста)
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]То, что Вы считаете проблемой, на самом деле является ожидаемым поведением. Краткий экскурс в основы блочной модели (свойство float):

Элемент с float и следующие за ним в потоке элементы ведут себя следующим образом:
1. Элемент с float смещается по горизонтали и прилипает к одной из сторон своего родительского элемента (контейнера).
2. Элемент с float перестает занимать по ширине все доступное пространство контейнера (как это происходит с блочными элементами в прямом потоке). С его неприжатой к контейнеру стороны появляется свободное пространство.
3. Следующие за элементом с float блочные элементы перестают «замечать» элемент с float, подтягиваются вверх и занимают его место (подлезают под него полностью и занимают всю ширину потока), а строчные элементы внутри подвинувшихся наверх блочных элементов начинают обтекать элемент с float с его свободной стороны.

Контейнер, в котором располагается элемент с float, также перестает его «замечать». В связи с этим, если он будет заканчиваться раньше элемента с float по высоте, элемент с float будет проваливаться через низ этого контейнера.

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

Еще одно небольшое полезное примечание:
Назначить свойство float можно как блочному, так и строчному элементу. При этом строчные элементы автоматически становятся блочными. В связи с этим указывать для них отдельно display: block; уже не имеет смысла...

<div class='quotetop'>Цитата</div>

Если Вы намекаете на float: *;, в таком случае я вам скажу, что с оторбражением указанного свойства весьма серьезные проблемы у FF. Посему, приходится выбирать из 2 зол лучшее, а в нашем случае - легче.[/b]

Originally posted by AVDesign@Feb 28 2007, 12:53
И это отнюдь не единственный пример. Просто в данный момент я столкнулся с ним, поэтому и привел его вам.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]Проблем нет... Зол нет... Примера нет... И вряд ли будут другие...
Не первый и не второй год? Грустно...

[Kiosuki]

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

Теперь к делу.

Во-первых, хотел узнать источник следующего:

Originally posted by Aykroyd@Feb 28 2007, 14:40
Элемент с float и следующие за ним в потоке элементы ведут себя следующим образом:
1. Элемент с float смещается по горизонтали и прилипает к одной из сторон своего родительского элемента (контейнера).
2. Элемент с float перестает занимать по ширине все доступное пространство контейнера (как это происходит с блочными элементами в прямом потоке). С его неприжатой к контейнеру стороны появляется свободное пространство.
3. Следующие за элементом с float блочные элементы перестают «замечать» элемент с float, подтягиваются вверх и занимают его место (подлезают под него полностью и занимают всю ширину потока), а строчные элементы внутри подвинувшихся наверх блочных элементов начинают обтекать элемент с float с его свободной стороны.

Контейнер, в котором располагается элемент с float, также перестает его «замечать». В связи с этим, если он будет заканчиваться раньше элемента с float по высоте, элемент с float будет проваливаться через низ этого контейнера.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Originally posted by Aykroyd@Feb 28 2007, 14:40
Если Вам интересно почему данное поведение, кажущееся на первый взгляд нелогичным, весьма оправдано, а также как элементарнейшим образом обойти сей феномен при раскладке элементов на странице, могу просветить по этому поводу отдельным постом...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Действительно, такое поведение кажется мягко говоря, не логичным. Хотелось бы знать, почему? До сих пор мне лично удавалось справляться с этой трудностью весьма различными способами. Все мы совершенствуемся, и хотелось бы знать, как знающие люди работают с флоатами, а в частности, "обходят сей феномен"?

Далее, мне хотелось бы пообщаться по поводу поведения FF. Возможно, вы подскажете сразу же, или посоветуете форум, где мне как разработчику можно будет узнать более подробно о работе браузеров с CSS и XML.
А проблема, собственно, в следующем. Вот иллюстрация:
[attachment=5597:attachment]
3 <div style="display: table-cell;"> блока находятся внутри <div style="display: table;"> блока. Ширина 1 и 2 - фиксированная. Ширина 3 - определяется автоматически. Все бы ничего, но вот FF примерно каждый второй раз отображает эту страницу так:
[attachment=5598:attachment]
В чем дело? Не могу никак понять. Что уже только не пытался предпринимать. Причем, предсказать поведение невозможно. FF2 ведет себя так же, не предсказуемо. Opera ведет себя вполне адекватно, и всегда отображает страницу корректно, как и задумывалось. Кто сталкивался, подскажите, в чем дело? Спасибо заранее.

[Zigzag]

Originally posted by AVDesign@Mar 4 2007, 11:45
[b]В чем дело? Не могу никак понять. Что уже только не пытался предпринимать. Причем, предсказать поведение невозможно. FF2 ведет себя так же, не предсказуемо. Opera ведет себя вполне адекватно, и всегда отображает страницу корректно, как и задумывалось. Кто сталкивался, подскажите, в чем дело? Спасибо заранее.

могу сказать одно, пока существует IE 6, забудьте про display: table и им подобные правила CSS, в вашем случае, как и в99%, прекрасно можно обойтись только флоат разметкой. вам же подсказать не могу, т.к. досконально не знаю сие свойство, за отсутствием необходимости его применения за год блочной верстки.