2013-12-08 16 views
0

Я создал свой первый сайт для компании тети, и во всех браузерах он показан отлично, кроме IE.проблемы с Internet explorer

Адрес является http://almazini.96.lt

HTML структура:

<body> 
<div id="wrapper"> 
<div id="page1"></div1> 
<div id="page2"></div2> 
</div> 
</body> 

Проблема, что все дивы выровнены налево вместо того, чтобы в центре экрана.

Я нашел несколько советов об атрибуте css обложки text-align: center, но это не работает для меня.

теперь выглядит следующим образом:

body { 
    background: #f8f8f8 url(../images/bg.png); 
    border-top: 3px solid #7e7e7e; 
    margin: 0; 

} 

#wrapper { 
    position: absolute; 
    left:0; 
    right:0; 
    top: 58px; 
    max-width: 960px; 
    margin: auto; 
    text-align: center; 

} 


#page1 { 
    float:left; 
    left:0; 
    right:0; 
    width: 960px; 
    height: 700px; 
    margin: auto; 
} 

Можете ли вы помочь мне решить эту проблему? Большое спасибо.

Также в IE контакт php-форма отображается некорректно. Граница пересекает текстовую форму ввода.

Спасибо.

+2

Прошу прощения, добро пожаловать в IE-ад. – span

+0

спасибо за оптимистичный пост! – Almazini

+2

Привет, пожалуйста, проверьте [Что-то на моем веб-сайте или проекте не работает. Могу ли я просто вставить ссылку на него?] (Http://meta.stackexchange.com/q/125997) спасибо! –

ответ

3

Правило CSS для #wrapper неверно. Вы не должны использовать абсолютное позиционирование, если хотите, чтобы сайт с фиксированной шириной был центрирован в окне просмотра. Вместо этого вы должны установить ширину и использовать маржу auto. Вы были на полпути.

Я изменил CSS и работает везде.

#wrapper { 
    max-width: 960px; 
    margin: 60px auto; 
    text-align: center; 
} 

Это, вероятно, больше о других браузерах, которые фактически не реализуют спецификацию правильно. При установке абсолютного позиционирования левая и правая на 0 означали, что обертка была растянута, чтобы соответствовать всей ширине видового экрана, а не правилу max-length: 960. Абсолютное позиционирование имеет приоритет там. Поскольку ваши внутренние представления перемещаются слева, все они выравниваются. Поэтому IE действительно делает это правильно.

Для вашей контактной формы ширина набора полей устанавливается в 200 пикселей в CSS, что не так широко, как фактическое содержимое формы. Удалите ширину из правила #contactus fieldset, и вам будет хорошо идти. Снова Chrome делал неправильно. Вы устанавливаете ширину набора полей и не выполняете свое правило. Если вы добавили переполнение: скрытое к правилу fieldset, ваша форма была бы просто обрезана с правой стороны.

+0

Спасибо @ Крис! Вы так много помогли! – Almazini

+0

добро пожаловать. BTW при использовании IE или любого браузера вы можете открыть инструменты F12 и проверить разметку и как правила CSS применяются к ним. Вы можете редактировать правила в инструментах F12 и посмотреть, как они влияют на ваш макет, что очень удобно. –

Смежные вопросы