0
Изначально брал образец стиля css с html страничкой, css значительно переработал и всплыла проблема, в IE всё поехало. Причём исходный html отображается нормально на переработанном css, а моя страничка едет. Я уже максимально сократил её для поиска проблемы, но всё тщетно...
Подскажите пожалуйста что не так?
Вот стиль css
* {
margin: 0;
padding: 0;
}
a {color: #963;} Цвет ссылок
a:hover {color: #C60;}
body {
background: #069FFF url(images/bg.jpg) repeat-x left bottom;
color: #444; /* цвет текста */
font: normal 11px Arial, Helvetica, sans-serif;
}
.title
{
font-size: 24px;
}
p,code,ul {padding-bottom: 1.2em;}
li {list-style: none;}
h1 {
font: normal 14px Arial, Helvetica, sans-serif;
margin-bottom: 4px;
}
h1,h2,h3 {padding-top: 6px; color: #126DA2} /* без измен */
.clear {clear: both;}
/* structure */
.container {
background: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 10px 10px;
width: 820px; /* Ширина всей таблици */
}
/* header */
.top {
background: url(images/clouds.jpg) repeat-x;
padding: 90px 10px 0;
}
/* title */
.header {
background: #FFF;
font-size: 14px;
height: 150px; /* Высота шапки */
margin: 0 auto;
padding: 10px 10px 5px;
width: 820px; /* Ширина шапки */
}
#logo {
width: 820px; /* Ширина картинки шапки */
height: 150px; /* высота картинки шапки */
margin: 0 auto;
background: url(images/header.jpg) no-repeat left top;
}
#logo h1, #logo h2 {
margin: 0;
padding: 0;
text-transform: lowercase;
}
#logo h1 {
padding: 90px 5px 0 25px;
font-size: 35px; /* размер заголовка h1 */
color: #0272BA; /* ничего */
}
#logo h2 {
padding: 0px 0 0 25px;
font-size: 11px;
color: #0272BA; /* ничего */
}
#logo a {
color: #0272BA; /* цвет названия сайта */
}
/* navigation */
.navigation {
background: #D9E1E5 url(images/menu.gif);
border: 1px solid #DFEEF7; /* ничего */
height: 41px;
}
.navigation a {
background: #D9E1E5 url(images/menu.gif);
border-right: 1px solid #ffffff;
color: #ffffff;
display: block;
float: left;
font: bold 1.1em sans-serif;
line-height: 41px;
padding: 0 20px;
text-decoration: none;
}
.navigation a:hover {background: #319EDD; color: #ffffff; text-decoration: underline} /*ничего */
/* content */
.content {
float: left;
margin: 10px 0;
padding: 0 16px;
width: 790px; Ширина столбца 2
}
.content .descr {
color: #664;
font-size: 0.9em;
margin-bottom: 6px;
}
.content li {
list-style: url(images/li.gif);
margin-left: 18px;
}
.content p {font-family: Arial, Helvetica, sans-serif;}
/* table.sort */
.table.sort {
float: left;
margin: 10px 0;
padding: 0 16px;
width: 760px; Ширина столбца 2
}
.table.sort .descr {
color: #664;
font-size: 0.9em;
margin-bottom: 6px;
}
.table.sort li {
list-style: url(images/li.gif);
margin-left: 18px;
}
.table.sort p {font-family: Arial, Helvetica, sans-serif;}
/* footer */
#footer {
background: url(images/bgfooter.gif) repeat-x;
color: #FFF;
font: bold 10px Arial, Helvetica, sans-serif;
text-align: center;
height: 60px;
padding-top: 30px;
width: 840px;
margin: 0 auto;
}
#footer p
{
padding: 0px;
margin: 0px;
}
#footer a, #footer a:hover {color: #FFF;}
А вот упрощёный html (нормально в Опере, едет в IE)<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ТЕСТ В эксплорере</title> <meta name="keywords" content="Текст скрыт" /> <meta name="description" content="Текст скрыт" /> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- start header --> <div class="top"> <div class="header"> <div id="logo"> <h1>Текст скрыт</h1> </div> </div> </div> <div class="container"> <div class="navigation"> <a href="http://999">главная</a> <a href="58">Текст скрыт</a> <a href="558">Текст скрыт</a> <a href="46">Текст скрыт</a> <div class="clear"><span></span></div> </div> <div class="main"> <div class="clear"></div> </div> <div id="footer"> <p>Текст скрыт <a href="mailto:Текст скрыт@yandex.ru?subject=Текст скрыт">Текст скрыт@yandex.ru </p> <p><a href="http://Текст скрыт/downloads/Текст скрыт">1</a> | <a href="Текст скрыт">2</a> | <a href="Текст скрыт"></a></p> </div> </body> </html>Заранее благодарю
Наверх
...
