Здравствуйте,
Причина: Делаю простенький сайт-визитку, захотелось сделать фон фотографией, размером чуть меньше, чем монитор 22', пытаюсь растянуть на body, во всех браузерах растягивает и только любимый Интернет Эксплорер ставит её обычный размер (белая полоса вокруг в зависимости от прижимания)... Перепробовал множество найденных решений, ничего не помогло... (При этом, по F12, в стилях, ИЭ подчёркивает background-size:100% красной волнистой линией)... (При проверке CSS программой CodeLobster ошибок нет, но отображение такое же, как и в ИЭ)...
Вопрос: Есть какие-нибудь советы на эту тему?..
Вопрос2: В дополнение, на сайте есть меню на CSS, во всех браузерах отображается красиво, и лишь ИЭ не хочет распознавать горизонтальный список ul, что ему не нравится, может очерёдность какая-то?..
Код:
* {
margin: 0;
padding: 0;
}
html,
body{
height: 100%;
background: url('../images/fon11.jpg') top left fixed no-repeat;
-o-background-size: 100%;
-webkit-background-size:100%;
-moz-background-size:100%;
-khtml-background-size:100%;
background-size: 100%;
}
.wrapper {
position: relative;
min-height: 100%;
}
h1 {font-family:Georgia; font-style:italic; color: #176d6d; margin:1em 0 1em;}
h2 {color: #d1633c;}
h3 {color:#176d6d; text-align: center;}
h4 {color:#176d6d; text-align: center;}
p{color:#000; font-size: 0.9em;}
.column_left{
width: 20%;
}
.column_right{
width: 20%;
}
.banner {font-family:Georgia; font-size:1.4em; font-style:italic; color:#176d6d; text-align: left; margin-left: 15%; margin-top:-10px;}
.shapka{
text-align: center;
}
.nssylka{
float:right;
}
/*--ID вывода даты-----*/
/*#date{/*color: #42595F;*/ /*text-align: right; font-size: 1.2em; padding:5px 20px 0 0;}*/
/*--Класс вывода даты-----*/
#date{font-family: Arial, Helvetica, sans-serif; color: #999966;/*color: #42595F;*/ text-align: right; font-size: 1.2em; padding:5px 20px 0 0; vertical-align:midl}
/*--Верхняя строка меню------*/
.menu a {color:#FFF; margin-left:20px; margin-right:20px;}
a:active {
color: #ffff00; /* Цвет активных ссылок */
}
/*--Ссылка на главную-----*/
.nav{
font-style:italic;
text-align: left;
padding-left: 20px;
}
#glavnaya{
font-family: Arial, Helvetica, sans-serif;
color: #eee;/*color: #42595F;*/
font-size: 0.9em;
padding:5px 20px 0 0;
vertical-align:midlle;
width: 80%;
}
#uslugi{
width: 80%;
}
#otkl_li{
list-style-type: none; /* Убираем маркеры */
}
#glavnaya1{
background:#5a7edc;
height:120px;
padding:15px;
}
#glavnaya2{
background:#64aa0c;
padding:15px;
}
#glavnaya3{
background:#863254;
padding:15px;
}
#glavnaya4{
background:#ff3200;
height: 120px;
padding:15px;
}
#glavnaya5{
background:#dea716;
padding:15px;
}
#glavnaya6{
background:#8730f8;
padding:15px;
}
/*--Формат H1 для названия статьи-----*/
#zagolovok{
margin:0;
font-size: 1.5em;
text-align:left;
padding-left:30%;
}
/*--Обо мне-----*/
#obo_mne{
background-color: #d7e0e5;
font-family: Arial, Helvetica, sans-serif;
width:80%;
}
#obo_mne1{
width:40%;
padding: 5px;
}
/*--Выравниваем заголовок и контакты-----*/
#pered_k{
width:50%;
}
#kont_h{
background-color: #d7e0e5;
font-style:italic;
font-size: 1.1em;
margin:0;
text-align:left;
/*text-shadow: 2px 2px 2px #fff;*/
padding-left:20px;
padding-top: 20px;
}
#kontakty{
background-color: #d7e0e5;
font-style:italic;
font-size: 1.1em;
margin:0;
text-align:left;
/*text-shadow: 2px 2px 2px #fff;*/
padding-left:20px;
}
#kontakty1{
background-color: #d7e0e5;
font-style:italic;
margin:0;
text-align:center;
/*text-shadow: 2px 2px 2px #fff;*/
/*padding-left:20px;*/
}
#kontakty2{
list-style-type: square outside;
margin:0;
text-align:left;
padding-left:10%;
}
/*--Меню только на CSS-----*/
.tnav{
background-color:#fsfsfs;
border:none;
width:100%;
}
.nhr{
border:0px;
margin: 0;
padding: 0;
}
/*--Стиль тонкой линии, из-за отступов в ИЭ-----*/
div.nhr hr {display:none;}
div.nhr {
border-top:1px #42595f solid; /*#ccc*/
height:1px;font-size:0px;
line-height:0px;
margin-bottom:-1px;
clear:both;
}
nav{
width: 960px;
margin: 5px auto;
text-align: center;
}
nav ul{
*display: inline;
margin: 0;
padding: 0;
}
nav li{
margin: 0 10px; /* Добавляем поле по горизонтали */
display: inline-block;
*display: inline; /* IE7 и хуже */
zoom: 1;
}
nav a{
display: inline-block;
position: relative;
padding: 8px 15px;
border: 2px solid #fff;
text-decoration: none;
color: #42595f;/*#999;*/
font: bold 14px 'Lucida sans', Arial, Helvetica;
background-color: #d7e0e5;
background-image: linear-gradient(top, #F5F5DC/*#eaeaea*/, #fff);
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
0 0 1px 0 rgba(0, 0, 0, .2),
0 2px 2px rgba(0, 0, 0, .3),
0 10px 10px -5px rgba(0, 0, 0, .2);
}
nav a:hover{
background-color: #42595f;/*#eee;*/
background-image: linear-gradient(top, #eee, #fff);
color: #F5F5DC;/*#fbef99;/*#999;*/
}
nav a:active{
top: 1px; /* Имитируем нажатие кнопки */
background: #f5f5f5;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
0 0 1px 0px rgba(0, 0, 0, .2),
0 1px 2px rgba(0, 0, 0, .3);
}
.content {
padding-bottom: 56px;
}
/*--Центральная таблица--*/
.seredina{
border: 0;
box-sizing: border-box;
}
.footer {
position: absolute;
background-color:#42595f;
height: 80px;
left: 0;
bottom: 0;
width: 100%;
text-align:center;
}
/*--Шрифт в подвале страницы-----*/
.bottom {font-family: Arial, Helvetica, sans-serif; font-size:1.0em; color:#999966; margin:0; padding-top:-5px; vertical-align:top; display:block;}
Спасибо...
