Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Вопрос о кроссбраузерности

#1 rich108

rich108
  • Пользователь
  • 6 сообщений
  • Репутация: 0
0

Отправлено 25 Сентябрь 2012 - 11:52

Такой вопрос, верстаю сайт на денвере! В хроме и в опере все норм, но вот в лисе и эксплорере малость некоторые элементы вниз съезжают. Что посоветуете. Нужно очень знать как это исправить !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="[[++site_url]]" />
<meta name="description" content="Похудеть правильно, бросить пить, бросить курить, избавиться от вредных привычек и обрести здоровье "/>
<meta name="keywords" content="Бросить курить,курить,пить,бросить пить,помощь,бесплатная помощь,бесплатно курить,бросить курить бесплатно"/>
<link href="assets/templates/vita/css/style.css" rel="stylesheet" type="text/css"/ >
<link rel="stylesheet" type="text/css" href="assets/templates/vita/css/styleglav.css"/>
<link rel="stylesheet" type="text/css" href="assets/templates/vita/css/menu.css"/>
<style>
.arrow {
display: inline-block;
position: relative;
text-indent: 0px;
width: 215px;
height: 150px;
background: url(assets/templates/vita/img/tv/tv.png) no-repeat;
}
.arrow span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(assets/templates/vita/img/tv/tv22.png) no-repeat;
background-position: -0px 0;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.arrow:hover span {
opacity: 1;
}

.arrow2 {
display: inline-block;
position: relative;
text-indent: 0px;
width: 101px;
height: 101px;
background: url(assets/templates/vita/img/vopros/voprosweb.png) no-repeat;
}
.arrow2 span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(assets/templates/vita/img/vopros/voprosweb2.png) no-repeat;
background-position: -0px 0;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.arrow2:hover span {
opacity: 1;
}

.arrow4 {
display: inline-block;
position: relative;
text-indent: 0px;
width: 308px;
height: 192px;
background: url(assets/templates/vita/img/glav/resepshnweb3.gif) no-repeat;
}
.arrow4 span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(assets/templates/vita/img/glav/resepshnweb44.gif) no-repeat;
background-position: -0px 0;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.arrow4:hover span {
opacity: 1;
}
.arrow5 {
display: inline-block;
position: relative;
text-indent: 0px;
width: 221px;
height: 248px;
background: url(assets/templates/vita/img/glav/kontakty.gif) no-repeat;
}
.arrow5 span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(assets/templates/vita/img/glav/kontakty2.gif) no-repeat;
background-position: -0px 0;
opacity:0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.arrow5:hover span {
opacity: 1;
}
.arrowlift{
display: inline-block;
position: relative;
text-indent:0px;
width:176px;
height:273px;
background:url(assets/templates/vita/img/glav/lift2.gif) no-repeat;
}
.arrowlift span{
position:absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:url(assets/templates/vita/img/glav/lift22.gif) no-repeat;
background-position:-0px 0;
opacity:0;
-webkit-transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
}
.arrowlift:hover span {
opacity: 1;
}
.arrowcvet {
display: inline-block;
position: relative;
text-indent: 0px;
width: 160px;
height: 169px;
background: url(assets/templates/vita/img/glav/cvetok.png) no-repeat;
}
.arrowcvet span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(assets/templates/vita/img/glav/cvetok2.gif) no-repeat;
background-position: -0px 0;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.arrowcvet:hover span {
opacity: 1;
}
.arrowknigi {
display: inline-block;
position: relative;
text-indent: 0px;
width: 116px;
height: 67px;
background: url(assets/templates/vita/img/glav/knigi2.gif) no-repeat;
}
.arrowknigi span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(assets/templates/vita/img/glav/knigi2.gif) no-repeat;
background-position: -0px 0;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.arrowknigi:hover span {
opacity: 1;
}
</style>
<script type="text/javascript">
startList = function()
{
if (document.all&&document.getElementById)
{
navRoot = document.getElementById("nav")
for (i=0; i<navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<div id="wreaper">
  <div id="shapka">
  </div>
   [[$menu?]]

   <div id="zagolovoktv">
<div id="zagolovoktvtext">
О методе
</div>
</div>
<div id="tv">
<a href="[[~100]]" class="arrow"><span></span></a>
</div>
<div id="besplatno">
<a href="[[~101]]" class="arrowcvet"><span></span></a>
</div>
<div id="textonas">
О нас
</div>
<div id="resepshn">
<a href="[[~5]]" class="arrow4"><span></span></a>
</div>
<div id="onas">
<img src="assets/templates/vita/img/plashka/onas.png" width="77" height="78"/>
</div>
<div id="vstenu">
<img src="assets/templates/vita/img/glav/vstenu.png" width="283" height="356"/>
</div>
<div id="textkontakty">
<p class="kontakty">Контакты <br />в городах России</p>
</div>
<div id="kontakty">
<a href="[[~6]]" class="arrow5"><span></span></a>
</div>

<div id="lift">
<a href="[[~135]]" class="arrowlift"><span></span></a>
</div>
<div id="vopros">
<a href="[[~110]]" class="arrow2"><span></span></a>
</div>
<div id="knigi">
<a href="#" class="arrowknigi"><span></span></a>
</div>
<div id="tabl">
<img src="assets/templates/vita/img/plashka/tabl.png" width="166" height="50"/>
</div>
<div id="plashkabesplatno">
<img src="assets/templates/vita/img/plashka/plashkabesplatno.png" width="165" height="55"/>
</div>
<div id="textgumpom">
<a href="">Гуманитарные
<br>(бесплатные) сеансы</a>
</div>
<div id="texttabl">
Индивидуальный
<br>прием
</div>
</div>
</body>
</html>

и css:
body{
position:fixed;
background-position: center;
padding-left:50%;
background:url(../img/glav/fon.jpg) repeat-x;
}
#wreaper{
margin:0 auto;
border:1px solid#000000;
width:980px;
height:840px;
margin-left:-490px;
}
#shapka{
background:url(../img/shapka44.gif) no-repeat;
width:980px;
height:180px;
border:1px solid #000000;
}
#resepshn{
position:absolute;
margin-left:345px;
margin-top:260px;
border:1px solid #000000;
width:308px;
height:192px;
}
#onas{
position:absolute;
border:0px solid #000000;
margin-left:350px;
margin-top:274px;
width:77px;
height:78px;
}
#tv{
position:absolute;
width:215px;
height:150px;
border:1px solid #000000;
margin-left:370px;
margin-top:40px;
}
#lift{
position:absolute;
border:0px solid #000000;
margin-top:60px;
margin-left:790px;
}
#besplatno{
position:absolute;
border:1px solid #000000;
width:160px;
height:169px;
margin-left:620px;
margin-top:300px;
}
#vstenu{
position:absolute;
border:1px solid #000000;
}
#kontakty{
border:1px solid #000000;
position:absolute;
width:221px;
height:248px;
margin-top:130px;
margin-left:30px;
}
#knigi{
border:1px solid #000000;
position:absolute;
width:116px;
height:67px;
margin-left:50px;
}
#vopros{
border:1px solid #000000;
position:absolute;
width:101px;
height:101px;
margin-top:420px;
margin-left:850px;
}
#tabl{
border:1px solid #000000;
position:absolute;
width:160px;
height:50px;
margin-left:797px;
padding-top:-10px;
}


Заранее спасибо!

 

 

  • 0

#2 Алия

Алия
  • Пользователь
  • 42 сообщений
  • Репутация: 10

Отправлено 30 Сентябрь 2012 - 00:26

Без ссылки на сайт трудно понять, какие элементы съезжают.
Почитайте в инете про "сброс стилей с помощью CSS Reset", возможно, достаточно будет обнулить поля.
  • 0

#3 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 30 Сентябрь 2012 - 10:18


Без ссылки на сайт трудно понять, какие элементы съезжают.
Почитайте в инете про "сброс стилей с помощью CSS Reset", возможно, достаточно будет обнулить поля.
http://www.masterweb...shju-css-reset/
  • 1


Оформление форума – IPBSkins.ru