SiteIS

HTML и CSS - революция в мире web-дизайна!

- управление отображением множества документов с помощью каскадных таблиц стилей

- Более точный контроль над внешним видом web-документов

- Различные представления для разных носителей информации

- Сложная и проработанная техника дизайна

Сайт визитка - исправляем недочеты в ИЕ 7 и 8

Научим непокорные браузеры понимать html 5 тэги. Самое оптимальное решение проблемы - использование специального скрипта. В секции head в файле index.html прописываем следующий код (сразу же под строкой, подключающей css файл):

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Сохраняемся, обновляем страницу и видим, что теперь ИЕ понимают все, что от них хотят. Так же стала видна проблема с отображением слогана в ИЕ 7. Что бы устранить ее, сделаем картинку блочной и немного увеличим ей нижний отступ.

/*Было*/
.header_wrap a.logo img {
margin-bottom:12px;
}
/*Стало*/
.header_wrap a.logo img {
margin-bottom:16px;
display:block;
}

И последняя неприятность - закругленные углы у фона ссылок меню при наведении. ИЕ 7-8 не понимают css 3 свойства border-radius. Тут можно было бы поступить по разному - например, использовать спрайты, либо же закруглить углы с помощью скрипта. Раз мы используем css 3, то не будем ничего менять и обратимся к скриптам (метод позаимствован с форума хаброхабр). Решение с помощью спрайтов (картинок) рассмотрим в другой раз.

Итак, качаем скрипт по ссылке ниже и распаковываем содержимое архива в папку synchronous/html/ (в корень сайта):

Скачать PIE.htc

Но для решения данной проблемы одного лишь PIE будет недостаточно. Фон с закругленными углами должен появляться при наведении мыши на ссылку, чего не произойдет, если просто подключить PIE к требуему блоку. Что бы добиться желаемого, попросим помощи у фреймворка jQuery.

В папке synchronous/html/ создаем директорию js, качаем архив библиотеки jQuery с сайта разработчика, или по ссылке ниже. Распаковываем содержимое архива в паку js.

Скачать jquery-1.7.1.min.js

Создаем в Notepad++ новый файл, сохраняем его в папку js с именем my_script.js и пишем в этом файле следующий код:

//dinamic PIE for IE 7-8
var	ie = jQuery.browser.msie,
	ieV = jQuery.browser.version,
	ltie7 = ie&&(ieV <= 7),
	ltie8 = ie&&(ieV <= 8);
	function setPie(selectors){jQuery(selectors).css("behavior", "url(PIE.htc)")};
	function unsetPie(selectors){jQuery(selectors).css("behavior", "none")};
	function resetPie(selectors){
	unsetPie(selectors);
	setPie(selectors);
	};
jQuery(document).ready(function(){
	//dinamic PIE width hover	
	jQuery(".top_nav li a").hover(
		function () {
			ltie8 ? resetPie(".top_nav li a") : false;
	});
});

Подключаем библиотеку jQuery и файл my_script.js к странице (если нужны подробности подключения jQuery - смотрим тут). Секция head в index.html теперь будет выглядеть следующим образом:

<head>
	<meta charset="utf-8" />
	<title>Главная</title>
	<link rel="stylesheet" href="/css/style.css" media="screen" />
	<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="/js/my_script.js"></script>
</head>

Сохраняем все изменения, обновляем страницу в IE 7,8 и смотрим на результат. Вот теперь наступила всеобщая красота. Страница отображается одинаково во всех требуемых браузерах. В принципе на этом можно было бы и закончить, но давайте немного оптимизируем css код. Некоторые стили для ссылок в навигации и для ссылки в логотипе пересекаются - будет правильнее их объединить.

/*Было*/
.header_wrap a.logo {
margin:0 auto;
padding-top:25px;
width:321px;
display:block;
font-size:14px;
color:#616161;
text-transform:uppercase;
text-decoration:none;
}
.top_nav li a {
padding:10px 20px;
display:block;
font-size:18px;
color:#616161;
text-transform:uppercase;
text-decoration:none;
}
/*Стало*/
.header_wrap a.logo, .top_nav li a {
display:block;
color:#616161;
text-transform:uppercase;
text-decoration:none;
}
.header_wrap a.logo {
margin:0 auto;
padding-top:25px;
width:321px;
font-size:14px;
}
.top_nav li a {
padding:10px 20px;
font-size:18px;
}

Код не стал на много короче, но такая запись будет более грамотной. Вот, собственно, и все - мы закончили верстку общей структуры страницы и хедера, победили капризы непокорных браузеров. Если вы запутались в коде и не можете понять что, куда и зачем писать, то по ссылке ниже можно скачать готовый пример того, что было сделано на данный момент, или посмотреть итоговый вариант всей работы.

Посмотреть Demo Скачать текущий код

Далее нас ожидает работа с элементами футера и разметка центральных колонок сайта.