IE6 - фоновое изображение отсутствует, лишние пиксели в заголовке и большая часть контента не по центру - PullRequest
Новая
       21

IE6 - фоновое изображение отсутствует, лишние пиксели в заголовке и большая часть контента не по центру

0 голосов
/ 22 июля 2009

Возникли серьезные проблемы с правильным отображением моего веб-сайта Wordpress в IE6.

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

www.genevarealtytrust.com / содержание / WP-содержание / темы / сор-терра основная / изображения / ie6_wpterra.jpg

Скриншот FF (ссылка ниже) - вот как он должен выглядеть. Попробовал в Safari пару версий Firefox и IE7, и все выглядят именно так, как они должны. IE6 единственный, кто доставляет мне неприятности.

www.genevarealtytrust.com / содержание / WP-содержание / темы / сор-терра основная / изображения / ff_wpterra.jpg

Есть идеи ??

Ссылка: www.genevarealtytrust.com/content

Я проверил свой код и попробовал несколько вещей, но безуспешно.

Помощь! Цени это!

Ответы [ 3 ]

1 голос
/ 22 июля 2009

Вы можете попробовать использовать условные стили. В документе заголовок вставка раздела: 

<!--[if lte IE 6]>
<link rel="stylesheet" media="screen,projection" href=www.example.com/ie.css" type="text/css" />
<![endif]-->

Теперь Вы можете начать редактирование ie.css, не беспокоясь о порче дизайна для другого браузера.

Дополнительное пространство вокруг nav: IE иногда имеет поля / отступы по умолчанию, отличные от других браузеров. Попробуйте определить 

#something {
margin: 0; 
padding: 0;
}

явно в вашем новом css.

Без фона: возможно, это выравнивание. Попробуйте добавить что-нибудь вроде «вверху слева» в определение фона. Пример: 

background-image: url('../img/site-bg.jpg') no-repeat scroll top right;

Центрирование контента: в CSS есть два способа центрировать контент. Во-первых: установка родительского элемента text-align свойство равным center; . Второе: определение width и установка margin в top-bottom-margin-value auto; . Пример: 

#something {
 width: 100px;
 margin: 10px auto;
}

Надеюсь, это поможет решить любые Ваши проблемы:)

0 голосов
/ 22 июля 2009

Спасибо за советы, ребята! Daveslab, я определенно буду держать этот список под рукой, и спасибо за рекомендацию книги.

Ошибка центрирования / отсутствует фоновое изображение:

Я сделал альтернативный документ CSS, и это дало мне больше возможностей для экспериментов - я смог решить проблему с отсутствующим фоновым изображением и центрированием, немного упростив CSS для проблемного раздела методом проб и ошибок. (удаленный поплавок, позиция ...)

Дополнительные пиксели:

То, что в итоге исправило 3 пикселя в нижней части моего заголовка, было ... просто глупо.

Очевидно, IE6 применял дополнительные 3 пикселя к нижней части изображения заголовка, потому что мой HTML-код для этого div был разделен на 3 строки ... 

<div id="header">
<img src="url" />
</div>

Мне просто нужно было объединить их все в одну строку, и лишние отступы внизу исчезли. Тупой ... (и безобразный) 

<div id="header"><img src="url" /></div>

У меня все еще есть лишний пиксель на правой стороне, который я пытаюсь разрешить - все еще расследую.

0 голосов
/ 22 июля 2009

На самом деле это не ответ на ваш вопрос (и, поскольку у меня недостаточно представителей, чтобы комментировать :)), но попробуйте просмотреть этот список распространенных ошибок IE CSS. Это помогло мне решить некоторые проблемы в моем CSS, но IE 6 - это боевая зона. В противном случае, я бы действительно посоветовал приобрести фантастическую книгу Bulletproof Web Design .

...