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

[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

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

[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. Что содержится в этом блоке?

[Aykroyd]

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

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

[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 интересный, решение где-то рядом, но что-то никак не могу понять, в чем дело?

[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]
Еще как имеет.

[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%, прекрасно можно обойтись только флоат разметкой. вам же подсказать не могу, т.к. досконально не знаю сие свойство, за отсутствием необходимости его применения за год блочной верстки.

[Zigzag]

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

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

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

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

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

[Zigzag]

укажите номер поста, на который хотите получить ответ

[Kiosuki]

Originally posted by Zigzag@Mar 4 2007, 19:54
укажите номер поста, на который хотите получить ответ
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Пост номер 1.

[Aykroyd]

Originally posted by AVDesign@Mar 4 2007, 13:45
Во-первых,* хотел узнать источник следующего:
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Без проблем.
[Только зарегистрированные пользователи могут видеть ссылки. ]
Если уж Вы заинтересовались источником, там же Вы сможете найти подробные ответы на вопросы:
1. Почему данное поведение весьма оправдано.
2. Каким образом обойти сей феномен при раскладке элементов на странице.

Originally posted by AVDesign@Mar 4 2007, 13:45
Далее, мне хотелось бы пообщаться по поводу поведения FF. Возможно, вы подскажете сразу же, или посоветуете форум, где мне как разработчику можно будет узнать более подробно о работе браузеров с CSS и XML.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Конечно, сразу же подскажем и посоветуем: [Только зарегистрированные пользователи могут видеть ссылки. ]

Originally posted by AVDesign@Mar 4 2007, 13:45
А проблема, собственно, в следующем. Вот иллюстрация:
3 <div style="display: table-cell;"> блока находятся внутри <div style="display: table;"> блока. Ширина 1 и 2 - фиксированная. Ширина 3 - определяется автоматически. Все бы ничего, но вот FF примерно каждый второй раз отображает эту страницу так:
В чем дело? Не могу никак понять. Что уже только не пытался предпринимать. Причем, предсказать поведение невозможно. FF2 ведет себя так же, не предсказуемо. Opera ведет себя вполне адекватно, и всегда отображает страницу корректно, как и задумывалось. Кто сталкивался, подскажите, в чем дело? Спасибо заранее.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

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

Originally posted by AVDesign@Mar 4 2007, 16:12
Как конкретно можно с помощью флоатов сделать то, что я описал в начале темы?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Элементарно можно сделать... Давайте так:
Вы для начала ознакомитесь с приведенной мной статьей, и вот если после ее прочтения Вам будет что-то еще не понятно, мы Вам с радостью поможем. ОК?

[Kiosuki]

Всем спасибо огромное! С display: table вроде бы разобрались. Вернее, полностью от этого чуда-юда отказались. Но, как ни странно, проблемы подобного рода у FF так и не исчезли. Ну вот, к примеру, вообще случайным образом возникает не корректное отображение - случай 1 - у FF, в то время, как все должно быть в случае 2. [attachment=6177:attachment] Причем, все блоки кроме почему-то последнего отображаются корректно. Замечен был симптом: при обновлении страницы все становится на свои места, как и должно быть. Бороться нету сил. Причем, было замечено следующее. Если упростить HTML и CSS код, выбросив все лишнее, чтобы попытаться найти возможную причину такого нахального поведения FF, никаких казусов не наблюдается. Товарищи, код контекста бессмысленно выкладывать. Могу дать ссылку на ресурс, где происходит подобная кака. [Только зарегистрированные пользователи могут видеть ссылки. ] Возможно, кто сталкивался? Подскажите как быть! Заранее большое спасибо!

P.S. Только что в голову пришла мысль, возможно, это проявление не полной загрузки CSS, как мне уже говорили? В таком бы случае все блоки отображались не корректно. А так - все, кроме одного. Т.е. CSS загрузился!

[Aykroyd]

Что-то я не пойму. Это пиар ресурса или действительно проблема? Если проблема – будьте добры выкладывать ссылку на конкретную страницу с этой проблемой, а не на корень сайта. Я его весь облазил – не обнаружил ни аналога приведенной Вами иллюстрации, ни проблемы, которую Вы описываете...