Что происходит с вёрсткой в моём случае?

Question

[Иван Желудков]

Есть вот такая страница. Но вёрстка эта в старых браузерах ведёт себя крайне непредсказуемо.
Блок с position: absolute; (сам фон, который по ширине и высоте 100%) воспринимается так, будто бы он не абсолютно позиционирован.
Элементы, которые съезжают вниз (а должны быть поверх) так же отображаются странно, если бы просто съехали, было бы проще.
На плохой дизайн не обращайте внимание.
Что не так? position не такой уж и новый селектор.

Comments

[Юрий Лобанов]

в каких именно браузерах?

[Иван Желудков]

В Chrome и IE старых версий точно. Версию сказать не могу

Answer 1

[Юрий Лобанов]

Вот Ваш фон на всю страницу:

#bgimage {
    display: block;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: -5;
}

У него position: fixed.
Знаете, я все же остаюсь при своем мнении - сами Вы не разбирались с версткой. Попробуйте Ваш пример выложить на jsfiddle.net/, и если сами не разберетесь в чем проблема (а я уверен, что пока будете писать код - разберетесь), то тогда нам будет легче Вам помочь. Действительно, в восьмерке разметка едет. Я тестировал в IETester, посмотрел еще через средства разработчика в ie11 (поставив версию 8), там таких проблем нет, но там средства разработчика глючат, не в первый раз замечаю. Проблема думаю в том, что у Вас тот самый контейнер с фоном вставлен в контейнер с контентом, зачем - я не понимаю, если Вы его все равно хотите оставлять статично на странице. Выньте его из того контейнера и поставьте вне его, думаю css менять не понадобится даже.

Comments

[Иван Желудков]

Спасибо, сейчас попробую

Answer 2

[ClassicRed]

я много не разбирался, но используйте html5shim - он исправит ситуацию с header и footer, старые браузеры их не понимают и отображают как хотят

Answer 3

[Юрий Лобанов]

Конкретизируйте вопрос, потому что складывается впечатление, что Вы наваяли что-то, заказчик заметил косяки у себя, а Вам лень разбираться.
Верстка не выглядит так, как будто Вы верстали под старые браузеры, так что думаю, что я угадал. Скачайте себе IETester, посмотрите что и где у Вас не так. А уже потом, если не поймете - пишите сюда вопросы. Если верстка будет нормально отображаться в IE6, то уж в старом хроме она точно будет нормальной.

Comments

[Иван Желудков]

нет требования поддержки IE6, я не принимаю заказы с такими требованиями

[Иван Желудков]

Я конкретизировал вопрос. Почему фон не воспринимает как абсолютный элемент

Answer 4

[Сергей Протько]

1) position это не селектор как минимум
2) position на десктопе работает правильно очень давно
3) приведите пример неправильного поведения и в каких старых браузера? Бо нету желание проверять на всем. Подозреваю что вы про IE8 и ниже.

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

Comments

[Иван Желудков]

А что плохого в ID?

[Alex Pro]

@webvany Нет ничего плохого, используйте. Особенно если будете обращаться к блоку из скрипта классы доставят вам неудобства

[Сергей Протько]

id тоже доставят неудобства. Использовать id в селекторах нужно очень осторожно.

[Иван Желудков]

Я понимаю, что могут быть проблемы, если дублировать id, в моём случае это произошло не потому, что я был невнимателен, я сделал это специально, оказалось так тоже нельзя. Теперь знаю. Спасибо.

Answer 5

[Alex Pro]

Повторяющиеся ID по-вашему это нормально? Для этого есть классы