Створення твердотільного заголовка з центром div всередині

Ось що я прагну, працюючи 100% правильно в Firefox 7 .

enter image description here

Коли я відкриваю його в IE 8 , він відображається так:

enter image description here

Ось основний макет:

<div id="header-home">
    <div id="header-content">
    </div>
</div>

З усіма елементами всередині # header-content .

Ось відповідні HTML і CSS, розміщені на JSFiddle. Якщо ви розтягнете панель попереднього перегляду, ви побачите, що вміст правильно розташований у Firefox.

http://jsfiddle.net/stapiagutierrez/agURs/

Чому IE не зосереджує div як слід?

0
@AlexeyIvanov Весь код знаходиться в посиланні JSFiddle. Я помічаю, що мені відсутній доктіп. Що я повинен використовувати тоді? Чому IE так finnicky! :(
додано Автор Only Bolivian Here, джерело
Здається, проблема в тому, що мені не вистачає Doctype. Поставте його як свою відповідь, і я прийму її. Дякую за ваш час!
додано Автор Only Bolivian Here, джерело
Чи можете ви показати нам повний код? Одна з можливих причин, чому "margin: auto" не працює, це те, що ви не маєте doctype або маєте неправильний.
додано Автор Alexey Ivanov, джерело
Ну, ви використовуєте xhtml, тому я додав xhtml один до JSFiddle. Спробуйте це: jsfiddle.net/agURs/1
додано Автор Alexey Ivanov, джерело
Будь ласка. :)
додано Автор Alexey Ivanov, джерело

2 Відповіді

IE повертається до режиму примх, якщо у вас немає доктіпа у вашому html. Причому в примхах режиму поля auto; не працює.

Додавання doctype може вирішити його.

Правий doctype і заголовок для xhtml (тому xml-читачі можуть зрозуміти, що це xml і може розібрати його):

<?xml version="1" encoding="UTF-8"?>

Але якщо ви розмістите рядок xml перед лінією DOCTYPE, IE не прийме її (оскільки вважає, що doctype завжди є першим рядком документа). Тому, щоб вона працювала в IE, ви повинні написати:


<?xml version="1" encoding="UTF-8"?>

або просто:


1
додано

Спробуйте поставити margin: 0 auto до # header-content .

0
додано