DIV верстка / некоректное отображение в ИЕ6 и ИЕ7

[Brodjaga_EU]

Добрый день,

давно планировал, теперь наконец нашел время для осуществления задуманного.

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

После прочтения множества всего мне удалось сделать небольшую заготовку, я ею доволен, но проблема в том, что страница соверненно неверно отображается в ИЕ6 и ИЕ7. В дугих браузерах (Firefox 3.5 и Opera 11) все выглядит так, как и было задуманно...

Хотелось бы узнать, что нужно изменить, чтобы добиться корректного отображения в ИЕ6 и ИЕ7?

Хотя бы хотелось услышать мнения, в чем может заключаться проблема?

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

Посмотреть можно по этой ссылке: www.brodjaga.eu/test.html

[htmlonline]

Код в теме выложи...

[Vlad]

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

1. Слоями верстают под конкретную задачу. Здесь же этой задачи не заметно. Имитация фреймов? Тогда почему не поддерживаются полосы прокрутки и минимальная высота.

2. 100% высота слоев. Ну это уже просто бичом становится, честное слово. В 90%, нет, даже в 98% случаях высота на весь экран не нужна.

Порекомендую на время забыть о существовании IE как класса. Ну разве что IE9 существует и все. Так будет быстрее изучить все возможности верстки не вдаваясь в баги этого браузера. Потом уже, как освоитесь, можно отдельно тестировать сайт в IE.

И еще совет. Не надо выкладывать код. Вы сделали правильно выложив сразу ссылку, не придется делать лишних телодвижений, код сразу же можно посмотреть, через Firebug полазить. В следующий раз так же и делайте, а htmlonline слушать не надо, он еще не заслужил доверия, чтоб его слушаться.

[Brodjaga_EU]

Попробую более подробно описать задачу.

Прежний вариант страницы представлен на приложенной картинке. Целью является достижение аналогичного результата без фреймов и таблиц. Страница 100% "резиновая".

О себе: я достаточно далек от мира верски, но мне это интересно, и я хочу добиться реализации своих простых "сайтов". Ставлю сознательно в ковычки, т.к. кому-то вероятно это определение может показаться слишком громким назнанием для простеньких страничек. ...Прочитал не одну статью посвященной CSS верстке и посмотрел несколько видеокурсов. Хочется опробовать все на практике, но сильно мешает остутствие возможности посоветоваться со знающим человеком...

Ответы на вопросы:

1. Я действительно пытаюсь имитировать фреймы. Полосы прокрутки и минимальная высота еще не реализованы.

2. Не уверен, что правильно понимаю проблему "100%-й высоты слоев". Это из-за нее возникают проблемы в ИЕ или замечание носит общий характер и имеет другое назначение?

Порекомендую на время забыть о существовании IE как класса. Ну разве что IE9 существует и все. Так будет быстрее изучить все возможности верстки не вдаваясь в баги этого браузера. Потом уже, как освоитесь, можно отдельно тестировать сайт в IE.

Я хотел двигаться небольшими шагами и проверять идентичность отображения сразу во всех интересующих меня браузерах. Так как проблемы при таком подходе будут решаться по мере поступления, а не возникать огромной кучей (отображение в ИЕ) когда я уже считал, что достигнул цели...

[Vlad]

Рекомендую вот этот макет имитирующий фреймы

http://www.cssplay.co.uk/layouts/body2.html

или этот

http://www.cssplay.co.uk/layouts/body4.html

[Brodjaga_EU]

Спасибо, я их посмотрю.

Но мне хотелось бы не только использовать / копировать готовые решения, но и понимать вещи происходящие с моими страницами... В частности, я никак не могу понять причину странного поведения в ИЕ... Никто не покажет пальцем где мне искать проблему?

[Vlad]

IE6 не поддерживает совместное использование top,bottom и left,right.

для IE7 у непосредственного родителя mid не указана высота.

Это все баги браузера.

[psywalker]

  Vlad said:

IE6 не поддерживает совместное использование top,bottom и left,right.

Можно найти экспрешан.

[Vlad]

Можно забить на IE6.

[psywalker]

  Vlad said:

Можно забить на IE6.

Да

[Brodjaga_EU]

  Vlad said:

IE6 не поддерживает совместное использование top,bottom и left,right.

для IE7 у непосредственного родителя mid не указана высота.

Это все баги браузера.

решил забить на ИЕ6... и решить проблему только для ИЕ7.

Так как проблема заключалась в отсутствии высоты родителя mid, я исправил ее следующим образом:

max-height: 100%; /* Mindesthöhe für moderne Browser */

height:auto !important; /* ВАЖНО!!! Для FF и Opera */

height:100%; /* ВАЖНО!!! Для IE *//

Mozilla и Опера отображают нормально, ИЕ6 (а я на него забил) тоже почти корректно, а вот ИЕ7 капризничает...

Все вермии ИЕ проверял на этом сайте.

Я довольно удивлен, то о чем много говорилось, логическое разделение структуры документа от оформления... Звучит здорово, а на практике все теже танцы с бубном...

Я снова в тупике и не понимаю причину ошибки в ИЕ7...

2. 100% высота слоев. Ну это уже просто бичом становится, честное слово. В 90%, нет, даже в 98% случаях высота на весь экран не нужна.

И еще хочу спросить. В чем причина ограничений? Помену не рекомендуется применять высоту в 100% ?

[Vlad]

htmlonline, не влезай в чужую тему. Есть вопрос — задай в отдельной теме. Эти посты будут удалены!

  Brodjaga_EU said:

решил забить на ИЕ6... и решить проблему только для ИЕ7.

Так как проблема заключалась в отсутствии высоты родителя mid, я исправил ее следующим образом:

max-height: 100%; /* Mindesthöhe für moderne Browser */

height:auto !important; /* ВАЖНО!!! Для FF и Opera */

height:100%; /* ВАЖНО!!! Для IE *//

Mozilla и Опера отображают нормально, ИЕ6 (а я на него забил) тоже почти корректно, а вот ИЕ7 капризничает...

Все вермии ИЕ проверял на этом сайте.

Я довольно удивлен, то о чем много говорилось, логическое разделение структуры документа от оформления... Звучит здорово, а на практике все теже танцы с бубном...

Я снова в тупике и не понимаю причину ошибки в ИЕ7...

2. 100% высота слоев. Ну это уже просто бичом становится, честное слово. В 90%, нет, даже в 98% случаях высота на весь экран не нужна.

И еще хочу спросить. В чем причина ограничений? Помену не рекомендуется применять высоту в 100% ?

Проверять в разных версиях IE можно через IETester, это бесплатная программа. Она немного глючит, но из альтернатив только IE8-IE9 в режиме совместимости.

http://www.my-debugbar.com/wiki/IETester/HomePage

Для IE7 стиль правильнее добавлять через условные комментарии. И код валидным останется и все исправления багов собраны в одном месте.

По поводу разделения структуры и оформления вы что-то путаете, подразумевается, что на странице у вас только теги отвечающие за добавление элементов, а само их оформление возложено на стили. Согласно этому принципу в коде не должно быть никаких тегов вроде font и им подобным.

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

[Brodjaga_EU]

2. 100% высота слоев. Ну это уже просто бичом становится, честное слово. В 90%, нет, даже в 98% случаях высота на весь экран не нужна.

Хотелось бы еще вернуться к вопросу слоев. Мне так и не удалось понять причину, по которой следует избегать 100%-й "высоты" слоев.

[swetlana]

вообще-то следует избегать любой высоты любых элементов, если это возможно.

Высота накладывает ограничения на содержимое.

Это уместно для каких-нибудь элементов типа шапы, кои в большей степени декоративные, имиджевые, но недопустимо для элементов, содержащих контент.

[Brodjaga_EU]

  swetlana said:

вообще-то следует избегать любой высоты любых элементов, если это возможно.

Высота накладывает ограничения на содержимое.

Это уместно для каких-нибудь элементов типа шапы, кои в большей степени декоративные, имиджевые, но недопустимо для элементов, содержащих контент.

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

В коде/примере, о котором шла речь в этом посте, как раз и было применение в декоративный целях. Если я все правильно понимаю, однако Vlad подверг критике такое применение 100% высоты.

Значит ли это, что он имел ввиду и другие негативные моменты? Если да, то какие?...

И что это за ограничения, которые накладывает высота? Имеется ввиду, что если содержимое слоя будет больше самого слоя и будет необзодимо бороться с overflow?

[swetlana]

чуть поправлю. Я не говорила о высоте именно 100%. Я говорю именно о любой высоте.

И с оговоркой: если это возможно.

В вашем случае, конечно, дизайн весьма своеобразный. Применение высоты 100% оправдано.

В общем же случае — соглашусь с Владом: как правило это не нужно и только вредит.

[Vlad]

Если задать 100% высоты для <div> внутри <body>, то это ни к чему не приведет. У <body> высота по умолчанию auto и равна высоте контента. Получается, что надо установить 100% и для <body>. Далее история повторяется с <html>, для него также придется поставить 100%. В результате такой многоступенчатой системы меняется вся логика поведения браузера для конкретного сайта. В итоге это может привести к неприятным последствиям вроде того, что текст будет выходить за пределы фона, "обрезаться" элементы, полоса прокрутки может появиться в ненужный момент и др. Это все технические моменты, а есть еще идеологические, связанные с логикой поведения элементов. Светлана об этом упомянула.

Кстати, использование top:0;bottom:0 тоже делает слой на всю высоту без всяких height.