Сбой макета в т. е. имеет незначительную ошибку в опере.Помогите?

Question

Я разработал макет, основанный на этом (из здесь ) - я сделал свободную перестановку элементов div возможной для небольшого количества SEO.Вы можете увидеть, что я сделал здесь ( css ).

Как так, у моего макета есть одна небольшая ошибка - в Opera область просмотра не расширяется доприспособить нижний колонтитул (т.е. полоса прокрутки не появляется, если только нижний колонтитул не виден).В противном случае он работает безупречно в Opera 11, Firefox 4 и IE 8. Однако, когда я загрузил его на сайт , для которого я его создаю ( layout css ), он оказалсяиз-за того, что страница в IE выглядит неработающей - левый столбец появляется сверху среднего, а заголовок не появляется, пока я не поиграюсь с параметрами левого столбца в инструментах разработчика IE.

Итак, кто угоднопомогите разобраться, что ломает страницу?Я знаю, что этот вопрос больше подходит для doctype.com, но по какой-то причине я не могу туда войти.

Однако я бы предпочел, чтобы элементы div были в моем источнике HTML в следующем порядке:

1. Содержимое
2. Нижний колонтитул
3. Левый столбец
4. Правый столбец
5. Заголовок

Iне нужны предложения для новых макетов.Я пытаюсь понять, почему это работает в IE, а это не работает.

Answer 1

Хотя A-List-Apart - один из моих любимых сайтов, я обнаружил, что иногда предлагаемые им css не всегда совместимы с разными браузерами, как хотелось бы. Тот же самый макет может быть найден Мэтью Джеймсом Тейлором, который является кросс-браузерно-совместимым и не требует JavaScript для запуска. Приготовьтесь пройтись по CSS. Это шаблон CSS, который я сейчас использую для большинства моих основных макетов. Я обнаружил, что он чрезвычайно гибок, когда вы проанализируете, как все контейнеры сочетаются друг с другом.

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

Answer 2

Решение два для SEO:

  <div id=siteBox>
  <div id=center class=column>
    <h1>This is the main content.</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
  </div>
  <div id=header>This is the header.</div>
  <div id=left class=column>
    <h2>This is the left sidebar.</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
  </div>
  <div id=right class=column>
    <h2>This is the right sidebar.</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
  </div>
  <div id=footer>This is the footer.</div>
    </div>

Answer 3

Столкнувшись со сложной инженерной проблемой, будь то программирование, веб-дизайн или электроника, зачастую наиболее успешным методом (по крайней мере для меня) является метод «вовне». Одна из самых трудных мыслей об этом - заставить себя использовать это, так как это «только небольшая настройка где-то», которую вы будете делать и исправлять все ... Когда я трачу много времени на поиски правильной настройки, я знаю, что должен измени мой подход.

Итак, начиная с нуля, я перестроил копию index.php, вставив биты из сломанного оригинала, чтобы выяснить, что ломает вещи. И, конечно же, оказалось, что виновником был ... DOCTYPE, на который я никогда не обращал особого внимания - так как я только недавно начал работать над веб-страницами как часть моей работы, заботясь о совместимости и т. Д. Я ударил XHTML 1.0 Переходный тип документа вместо исходного HTML, и он работал как шарм.

Спасибо всем, кто помог, и особенно @Magnum за его усилия.

(