Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.09.2010, 00:43
Интересующийся
Отправить личное сообщение для rognarek Посмотреть профиль Найти все сообщения от rognarek
 
Регистрация: 12.08.2010
Сообщений: 14

слетает верстка в IE6 и IE7 (js используется)
как должно быть

Возникла проблема - когда сайт открывается в IE6 или IE7, то начинается полный бардак с подарками (я уже не говорю про png-прозрачность -это уже побочный вопрос).
что получается в IE6:

1. когда только обновилась страничка div'ы с подарками (backgroundom сделано) смещены вправо относительно того, где должны быть на самом деле. Когда мышку подводишь он "прыгает влево" на "задуманное" для него место и уже подпрыгивает вверх-вниз как и положено. Далее, если мышку отвести от подарка (щас говорю только про закрытые подарки) то он остается на месте (это так и должно быть, просто описала поведение, если нет возможности протестить на разных версиях, я рассказываю про IE6).
2. а вот в IE7 закрытые подарки тоже смещаются при наведении мышки, но только из начальной точки "прыгают" влево.
(уточню: в IE6 подарок прыгает из т.Б в т.А;
в IE7 подарок прыгает из т.А в т.Б.)
Правильная точка - это точка А, в IE8 и других браузерах все нормально, т.е. ничего вправо-влево не должно прыгать, только подпрыгивать вверх-вниз при наведении.
основной код
<table style="background:#fff url('images/fon_right_1.jpg') repeat-x;" border="0" cellpadding=0 cellspacing=0>
	       <tr>
		       <td height="131px" style="background:url(images/fon_podarki.jpg) no-repeat; height:131px"><div id="p1">
			<div id="b1" class="bb"></div>
			<div id="b2" class="bb"></div>
			<div id="b3" class="bb"></div>

			<div id="b4" class="bb"></div>
			<div id="b5" class="bb"></div>
		</div></td>
		   </tr>
		   <tr>
		       <td style="padding-left:30px"><div id="t1"></div><!--поле, где будет писаться текст--></td>
		   </tr>
		   <tr>
		       <td height="20px" style="vertical-align:top" valign="top"><div id="rs" class="txt1"></div><!--текст в всплывающем окошке "Получить текст-->

			   <div id="txtp"></div><!--закладочки с циферками--></td>
		   </tr>
	  </table>

сам скрипт
var selBt;
	var selb1;

	var bx;
	var timeID = 0;

	var nJump;
	var arEl;
	var b1, b2, b3, b4, b5;

function setCookie (name, value, expires, path, domain, secure) {
      document.cookie = name + "=" + escape(value) +
        ((expires) ? "; expires=" + expires : "") +
        ((path) ? "; path=" + path : "") +
        ((domain) ? "; domain=" + domain : "") +
        ((secure) ? "; secure" : "");
}

function getCookie(name) {
	var cookie = " " + document.cookie;
	var search = " " + name + "=";
	var setStr = null;
	var offset = 0;
	var end = 0;
	if (cookie.length > 0) {
		offset = cookie.indexOf(search);
		if (offset != -1) {
			offset += search.length;
			end = cookie.indexOf(";", offset)
			if (end == -1) {
				end = cookie.length;
			}
			setStr = unescape(cookie.substring(offset, end));
		}
	}
	return(setStr);
}


	function Jump()
	{
		var h = $(bx).css("top");
		if(nJump==0) h="20px";
		else if(nJump==1) h="36px";
		else if(nJump==2) h="23px";
		else if(nJump==3) h="34px";
		else if(nJump==4) h="27px";
		else if(nJump==5) h="32px";
		else h="30px";

		$(bx).css("top", h);

		if(nJump==6) return;
		nJump++;
		timeID=window.setTimeout(Jump, 300-nJump*30);
	}

	function StopJump()
	{
			window.clearTimeout(timeID);
			timeID=0;
			$(bx).css("top", "30px");
	}

	function Log(text)
	{
		//var t=$("#rs").html();
		//t+=text+"<br/>";
		//$("#rs").html(t);
	}

	$(document).ready(function() {
		b1=$("#b1").get(0);
		b2=$("#b2").get(0);
		b3=$("#b3").get(0);
		b4=$("#b4").get(0);
		b5=$("#b5").get(0);

		b1.ct=100;
		b2.ct=100;
		b3.ct=100;
		b4.ct=100;
    b5.ct=100;

		b1.im = "url('images/otkrit_1.png')";
		b2.im = "url('images/otkrit_2.png')";
		b3.im = "url('images/otkrit_3.png')";
		b4.im = "url('images/otkrit_4.png')";
		b5.im = "url('images/otkrit_5.png')";

		b1.im2 = "images/devushka_1.jpg";
		b2.im2 = "images/devushka_2.jpg";
		b3.im2 = "images/devushka_3.jpg";
		b4.im2 = "images/devushka_4.jpg";
		b5.im2 = "images/devushka_5.jpg";

		Init();

		Log("start");
//*
		$("#p1 div.bb").mouseover(function()
		{
			Log("mouseover");
			$(bx).css("top", "30px");

			if(timeID!=0)
				window.clearTimeout(timeID);

			if(this.ct==200) return;

			bx=this;

			nJump=0;
			Jump();
		});

		$("#p1 div.bb").mouseout(function()
		{
			Log("mouseout");
			StopJump();
		});

		$("#p1 div.bb").click(function() { DoClick(this); });

//*/
		var coo = getCookie("ulibka");
		setCookie("ulibka", 0, "", "", "", "");		
		if(coo==1) { DoClick(b1); }
		if(coo==2) { DoClick(b2); }
		if(coo==3) { DoClick(b3); }
		if(coo==4) { DoClick(b4); }
		if(coo==5) { DoClick(b5); }
 });

function DoClick(elm)
{
//*	
	$(selBt).css("border", "none");
	$(selBt).css("top", "30px");

	selBt=elm;

	StopJump();	

	$(elm).css("background", elm.im);
	//alert(elm.ct);
	$("#devushka").attr("src", elm.im2);

	elm.ct=200;

	$("#txtp").html("");
	if(elm.arr)
	{
		var l;
		l=elm.arr.length;
		if(l==1)
		{
			$("#t1").html(elm.arr[0]);
		}
		else
		{
			if(l>1)
			{
				var el;
				for(var i=0;i<l;i++)
				{
					el = $("<div class='lbl' onClick='c(this)' >"+(l-i)+"</div>");
					el = el.appendTo("#txtp").get(0);
					el.et=elm.arr[i];
				}

				c(el);
			}
		}
	}

	Test();
//*/
}

function c(o)
{
	//alert(o.et);
	$(selb1).css("background-color", "white");
	$(selb1).css("width", "18px");
	selb1=o;
	$(selb1).css("background-color", "#ffcb09");
	$(selb1).css("width", "18px");
	$("#t1").html( o.et );
}

function Test()
{
	if( (b1.ct==200) && (b2.ct==200) && (b3.ct==200) && (b4.ct==200)&& (b5.ct==200))
	{
			$("#rs").attr("class", "txt").html("<a style=\"font-family:Tahoma;font-size:14px;font-weight:bold;\" href=\"#\" onClick=\"window.open('skidka.php', 'newWin', 'Toolbar=0, Location=0, Directories=0, Status=0, Menubar=0, Scrollbars=0, Resizable=0, Copyhistory=1, Width=430, Height=263')\">Получить скидку</a>");
	}
}

function Init()
{
	b1.arr = [//узнай идеи
	    "<span style=\"font-family:Tahoma;font-size:20px;font-weight:bold\">Новый горизонт идей</span><p style=\"font-family:Tahoma;font-size:13px;\"><i><b>текст вырезан в целях экономии символов</b></i></p>"
	];

	b2.arr = [		//ощути надежность
        "<span style=\"font-family:Tahoma;font-size:20px;font-weight:bold\">Новый горизонт надежности</span><p style=\"font-family:Tahoma;font-size:13px;\"><i><b>текст вырезан в целях экономии символов</b></i></p>"
		
	];

	b3.arr = [ //почувствуй комфорт
	    "<span style=\"font-family:Tahoma;font-size:20px;font-weight:bold\">Новый горизонт комфорта</span><p style=\"font-family:Tahoma;font-size:13px;\"><i><b>текст вырезан в целях экономии символов</b></i></p>"
	];

	b4.arr = [ //удивись щедрости
	    "<p style=\"font-family:Tahoma;font-size:13px;\">И, наконец,  большинство действующих акций могут быть совмещены  в Вашем заказе.<br><br><i><b>текст вырезан в целях экономии символов </b></i></p>",
	    "<span style=\"font-family:Tahoma;font-size:20px;font-weight:bold\">Новый горизонт щедрости</span><p style=\"font-family:Tahoma;font-size:13px;\"><i><b>текст вырезан в целях экономии символов"
	];

    b5.arr = [ //улыбки
		"<span style=\"font-family:Tahoma;font-size:20px;font-weight:bold\">Новый горизонт улыбок</span><p style=\"font-family:Tahoma;font-size:13px;\"><i><b>Что такое  профессиональное обслуживание?</b></i>текст вырезан в целях экономии символов</b></i></p>"
	];
}

страничка:
http://new-gorizont.oknarosta.ru/ulibnis.php
Ответить с цитированием
  #2 (permalink)  
Старый 08.09.2010, 05:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

попробуйте добавить или изменить это
<style type="text/css">
#p1 div {
margin-left: 0px;
margin-right: 15px;
display: inline;
}
#p1{
  padding-left: 15px;
  width: 632px;
}
</style>
Ответить с цитированием
  #3 (permalink)  
Старый 08.09.2010, 11:50
Интересующийся
Отправить личное сообщение для rognarek Посмотреть профиль Найти все сообщения от rognarek
 
Регистрация: 12.08.2010
Сообщений: 14

заработало, спасибо.
А может быть еще можете подсказать, как избавиться от серого фона, который появляется в IE6 (png-прозрачность).
Ответить с цитированием
  #4 (permalink)  
Старый 08.09.2010, 19:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

rognarek, попробуйте это
http://www.twinhelix.com/css/iepngfix/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Большой JS файл. Кэш IE6. deadpsh Общие вопросы Javascript 1 26.11.2008 23:38