Помогите с кроссбраузерностью

webnoob · 11.01.2009, 15:14

Помогите одолеть ИЕ.

Вот как выглядит мой сайт в 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

Какие параметры мне вообще надо править? Глючит ведь именно левые блоки, значит это я с ними напортачил. Привожу коды:

Добавлено через 1 минуту

Код:

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;
}

Добавлено через 11 секунд

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 я буду использовать отдельные таблицы стилей.

kost · 11.01.2009, 16:10

Вы молодец, что постарались и наделали прекрасных скриншотов. Но если бы вы выложили проблемную страничку, было бы больше шансов на помощь.

webnoob · 11.01.2009, 18:12

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

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

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

<div id="lnav">
<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>
<li><a href="#">Блог</a></li>
<li><a href="#">Повести</a></li>
</ul>

</div>
<div id="lnav1">
<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>
<li><a href="#">F.A.Q</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>
<li><a href="#">F.A.Q</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>
<li><a href="#">F.A.Q</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 id="reclama">
</div>

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

<div id="footer">
<h3>По вопросам размещения рекламы, партнерских программ,обмена ссылками,копирования материалов обращаться на [email protected]
</h3>
<h3>Все права защищены.All Rights Reserved.Копирование материалов сайта без разрешения владельца запрещено и карается по закону! ©2009 tw-portal.ru</h3>
<h3>Сайт оптимизирован под разрешение 1280*1024</h3>

</div>
</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;
}

kost · 11.01.2009, 19:36

Блин, не надо весь html-код. Выложите страницу в интернете в рабочем виде.

webnoob · 11.01.2009, 19:54

Страницу на локальном компе тестю,в нет еще не выкладывал.

Добавлено через 6 минут

Вот выложил на депозит архив http://depositfiles.com/files/hr12c9pzp

kost · 12.01.2009, 09:14

Вы идиот?

Выложите так, чтобы можно было зайти браузером и посмотреть.

webnoob · 12.01.2009, 12:10

Почти докопался до проблемы.ИЕ не нравятся стили для меню,расположение блоков,длину и ширину он правильно вычисляет.

**Silver** · 12.01.2009, 14:03

webnoob, спасибо, что сообщили нам об этом!

11.01.2009, 15:14	#1
webnoob	Помогите одолеть ИЕ. Вот как выглядит мой сайт в 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 Какие параметры мне вообще надо править? Глючит ведь именно левые блоки, значит это я с ними напортачил. Привожу коды: Добавлено через 1 минуту Код: 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; } Добавлено через 11 секунд 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 я буду использовать отдельные таблицы стилей. Последний раз редактировалось kost; 11.01.2009 в 16:08.. Причина: Добавлено сообщение

11.01.2009, 16:10	#2
kost	Вы молодец, что постарались и наделали прекрасных скриншотов. Но если бы вы выложили проблемную страничку, было бы больше шансов на помощь.

11.01.2009, 18:12	#3
webnoob	Вот весь HTML код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="style.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie.style.css" /> <![endif]--> </head> <body> <div id="header"><h1>Total War Portal</h1></div> <div id="content">Content for id "content" Goes Here</div> <div id="lnav"> <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> <li><a href="#">Блог</a></li> <li><a href="#">Повести</a></li> </ul> </div> <div id="lnav1"> <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> <li><a href="#">F.A.Q</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> <li><a href="#">F.A.Q</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> <li><a href="#">F.A.Q</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 id="reclama"> </div> <div id="friends"><span class="head">Наши партнеры</span></div> <div id="reclama1"></div> <div id="footer"> <h3>По вопросам размещения рекламы, партнерских программ,обмена ссылками,копирования материалов обращаться на [email protected] </h3> <h3>Все права защищены.All Rights Reserved.Копирование материалов сайта без разрешения владельца запрещено и карается по закону! ©2009 tw-portal.ru</h3> <h3>Сайт оптимизирован под разрешение 1280*1024</h3> </div> </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; }

11.01.2009, 19:36	#4
kost	Блин, не надо весь html-код. Выложите страницу в интернете в рабочем виде.

11.01.2009, 19:54	#5
webnoob	Страницу на локальном компе тестю,в нет еще не выкладывал. Добавлено через 6 минут Вот выложил на депозит архив http://depositfiles.com/files/hr12c9pzp Последний раз редактировалось webnoob; 11.01.2009 в 19:54.. Причина: Добавлено сообщение

12.01.2009, 09:14	#6
kost	Вы идиот? Выложите так, чтобы можно было зайти браузером и посмотреть.

12.01.2009, 12:10	#7
webnoob	Почти докопался до проблемы.ИЕ не нравятся стили для меню,расположение блоков,длину и ширину он правильно вычисляет.

12.01.2009, 14:03	#8
Silver	webnoob, спасибо, что сообщили нам об этом!