Помогите с кроссбраузерностью!В Opera,Firefox,сафари,гугл хром все супер.В ИЕ 6 и 7 в

12

psixopad

11 января 2009, 12:22

558

Помогите одолеть ИЕ.Вот как выглядит мой сайт в opera,firefox,safari,google chrome http://s58.radikal.ru/i159/0901/d2/ee980d82d7c7.jpg первый скрин,вот второй http://s44.radikal.ru/i106/0901/72/7ddda857a782.jpg .

Я думал что с ИЕ будут проблемы,но не думал что будет столько проблем.Вот скрины как выглядит все в ИЕ 6 http://s47.radikal.ru/i116/0901/62/e71f06ddc320.jpg , http://s52.radikal.ru/i137/0901/fc/b573a35d5802.jpg .В ИЕ 7 ситуация немного лучше http://s60.radikal.ru/i167/0901/56/feb1fee57404.jpg , http://s39.radikal.ru/i085/0901/67/1b93a9745bef.jpg .Какие параметры мне вообще надо править?Глючит ведь именно левые блоки,значит это я с ними напортачил.Привожу коды:

h1 {

text-align:center;

}

h3 {

font-size:60%;

}

.head {

font:95% Verdana;

font-weight:900;

display:block;

height:1.3em;

text-align:center;

color:#fff;

background-color: #0066FF;

}

ul {

list-style:none;

margin-top:7%;

padding:0;

font-family:Verdana;

font-size:90%;

font-weight:900;

}

ul li {

margin-top:10%;

margin-right:10%;

margin-left:10%;

}

ul li a {

display:block;

border-bottom:1px dotted #000;

padding-bottom:1%;

background-color:#f3f3f3;

color:#000;

text-decoration:none;

width:100%;

}

ul li a:hover {

text-decoration:underline;

}

Head это класс заголовков(навигация и т.д).Вот код левых блоков:

#lnav {

position: absolute;

top:0%; left:0.5%;

margin-top:6em;

text-align:center;

width:185px; height:16em;

border:2px solid #0066FF;

background:#f3f3f3;

}

#lnav1 {

position: absolute;

top:0%; left:0.5%;

margin-top:22.5em;

text-align:center;

width:185px; height:56.3em;

border:2px solid #0066FF;

background:#f3f3f3;

}

lnav это навигация,lnav1 это список игр (empire и т.д).Огромная просьба подсказать какие параметры надо править.Для И6 и ИЕ7 я буду использовать отдельные таблицы стилей.

314

T.R.O.N

11 января 2009, 12:46

#1

psixopad:
Для И6 и ИЕ7 я буду использовать отдельные таблицы стилей.

для таких простых дизайнов это просто глупо...

Объясните, зачем вобще здесь используются position: absolute;..

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

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

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)

З

54

Здыхлик

11 января 2009, 13:58

#2

Вообще не вижу причин для позиционирования блоков вручную. Для этого лучше использовать стандартные приемы типа обтекания (float).

P

12

psixopad

11 января 2009, 15:14

#3

T.R.O.N:
для таких простых дизайнов это просто глупо...
Объясните, зачем вобще здесь используются position: absolute;..
Судя по всему, Вы решили все врестать на дивах, но не руками, а используя какой-то редактор. ищите в сторону наследования между стилями и незакрытых дивов.
Если Вы всетаки проявили благоразумие, и все сделанно в таблицах + дивы, все проще. В иерархии IE див является приоритетней чем таблица. Просто перекрестные стили получились. обычная путаница. Выложите все.

Не правда,все сделал руками,виз редактором не пользуюсь.Вот весь ХТМЛ код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>Untitled Document</title>

<!--[if lte IE 7]>

<![endif]-->

</head>

<body>

<div id="header"><h1>Total War Portal</h1></div>

<div id="content">Content for id "content" Goes Here</div>

<span class="head">Навигация</span>

<ul>

<li><a href="#">Новости</a></li>

<li><a href="#">Модостроение</a></li>

<li><a href="#">Форум</a></li>

<li><a href="#">Повести</a></li>

</ul>

</div>

<span class="head">Empire Total War</span>

<ul>

<li><a href="#">Новости</a></li>

<li><a href="#">Первый взгляд</a></li>

<li><a href="#">Фракции,юниты</a></li>

<li><a href="#">Скриншоты,видео</a></li>

</ul>

<span class="head">Medieval 2 Total War</span>

<ul>

<li><a href="#">Новости</a></li>

<li><a href="#">Обзор игры</a></li>

<li><a href="#">Руководство</a></li>

<li><a href="#">Фракции,юниты</a></li>

<li><a href="#">Сетевая игра</a></li>

<li><a href="#">Скриншоты,видео</a></li>

<li><a href="#">Файлы</a></li>

</ul>

<span class="head">Rome Total War</span>

<ul>

<li><a href="#">Новости</a></li>

<li><a href="#">Обзор игры</a></li>

<li><a href="#">Руководство</a></li>

<li><a href="#">Фракции,юниты</a></li>

<li><a href="#">Сетевая игра</a></li>

<li><a href="#">Скриншоты,видео</a></li>

<li><a href="#">Файлы</a></li>

</ul>

</div>

<div id="login"><span class="head">Авторизация</span></div>

<div id="forum"><span class="head">Форум</span></div>

<div id="opros"><span class="head">Опрос</span></div>

</div>

<div id="friends"><span class="head">Наши партнеры</span></div>

<h3>По вопросам размещения рекламы, партнерских программ,обмена ссылками,копирования материалов обращаться на webmaster53@mail.ru

</h3>

<h3>Сайт оптимизирован под разрешение 1280*1024</h3>

</div>

</body>

</html>

Вот весь CSS код:

body {

width:100%; height:100%;

font-family:Verdana, Arial, Helvetica, sans-serif;

}

#header {

position:absolute;

top:0%; left:0.5%;

width:99%; height:5em;

border-bottom:2px solid #000099;

background: #6297EE;

}

#lnav {

position: absolute;

top:0%; left:0.5%;

margin-top:6em;

text-align:center;

width:185px; height:16em;

border:2px solid #0066FF;

background:#f3f3f3;

}

#lnav1 {

position: absolute;

top:0%; left:0.5%;

margin-top:22.5em;

text-align:center;

width:185px; height:56.3em;

border:2px solid #0066FF;

background:#f3f3f3;

}

#reclama {

position: absolute;

top:0%; left:0%;

margin-top:6em;

margin-left:84.2%;

text-align:center;

width:15%; height:9em;

border:2px solid #0066FF;

background:#f3f3f3;

}

#login {

position: absolute;

top:0%; left:0%;

margin-top:15.5em;

margin-left:84.2%;

text-align:center;

width:15%; height:11em;

border:2px solid #0066FF;

background:#f3f3f3;

}

#opros {

position: absolute;

top:0%; left:0%;

margin-top:27em;

margin-left:84.2%;

text-align:center;

width:15%; height:9em;

border:2px solid #0066FF;

background:#f3f3f3;

}

#forum {

position: absolute;

top:0%; left:0%;

margin-top:36.5em;

margin-left:84.2%;

text-align:center;

width:15%; height:17em;

border:2px solid #0066FF;

background:#f3f3f3;

}

#friends {

position: absolute;

top:0%; left:0%;

margin-top:54em;

margin-left:84.2%;

text-align:center;

width:15%; height:13em;

border:2px solid #0066FF;

background:#f3f3f3;

}

#reclama1 {

position: absolute;

top:0%; left:0%;

margin-top:67.5em;

margin-left:84.2%;

text-align:center;

width:15%; height:11.3em;

border:2px solid #0066FF;

background:#f3f3f3;

}

#footer {

position: absolute;

top:0%; left:0%;

margin-top:79.5em;

margin-left:0.35%;

text-align:center;

width:99%; height:5em;

border:2px solid #0066FF;

background:#f3f3f3;

}

h1 {

text-align:center;

}

h3 {

font-size:60%;

}

.head {

font:95% Verdana;

font-weight:900;

display:block;

height:1.3em;

text-align:center;

color:#fff;

background-color: #0066FF;

}

ul {

list-style:none;

margin-top:7%;

padding:0;

font-family:Verdana;

font-size:90%;

font-weight:900;

}

ul li {

margin-top:10%;

margin-right:10%;

margin-left:10%;

}

ul li a {

display:block;

border-bottom:1px dotted #000;

padding-bottom:1%;

background-color:#f3f3f3;

color:#000;

text-decoration:none;

width:100%;

}

ul li a:hover {

text-decoration:underline;

}

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах

Все что нужно знать о DDоS-атаках грамотному менеджеру