show/hide. Проблемы в IE
 

Здравствуйте. Имею простейший пример:

<div class="auth">
            <ul>
		      <li><a href="#">Зарегистрироваться</a></li>
		      <li><a href="#">Войти</a></li>
		    </ul>  
          </div>
		  <div id="auth-form"><img src="auth.png" alt="" /></div>

$(document).ready(function(){
    $(".auth li").eq(1).click(function(){
        $("#auth-form").show("fast");
        return false;
    })
	$(document).click(function(e){ 
	    if (!$(e.target).closest('#auth-form').length) { 
	        $('#auth-form').fadeOut("fast"); 
	    } 
	});
});

#auth-form { display: none; position: absolute; top: 30px; right: 10px; }

Во всех браузерах работает, кроме IE. Если же у auth-form сделать display: block, то все работает, включая появление блока.

Подскажите, как поправить?

Во-первых, у IE не event.target, а event.srcElement. Во-вторых, IE не передаёт объект event в аргумент ф-ции обработчика события, всё в window.event. Ну в-общем, делать надо так:

e = e || window.event;
x = e.srcElement || e.target;

exec, этот скрипт рабочий. Мне тут на форуме подсказывали. Наверное и вы тоже, просто потом сократили его немного.

Проблема в ie была из-за:

<!--[if IE]><script type="text/javascript" src="js/unitpngfix.js"></script><![endif]-->

Сделал картинку в блоке не png, а gif и все заработало.

Спасибо за помощь.

Помогите и мне. Есть такой хтмл:

<div id="nautica_flags">
			    <img src="img/nautica/s.jpg" alt="S" width="16" style="display: inline;" />
			    <img src="img/nautica/a.jpg" alt="a" width="16" style="display: inline;" />
			    <img src="img/nautica/i.jpg" alt="i" width="16" style="display: inline;" />
			    <img src="img/nautica/l.jpg" alt="l" width="16" style="display: inline;" />
			    &nbsp;&nbsp;
			    <img src="img/nautica/t.jpg" alt="t" width="16" style="display: inline;" />
			    <img src="img/nautica/o.jpg" alt="o" width="16" style="display: inline;" />
			    <img src="img/nautica/u.jpg" alt="u" width="16" style="display: inline;" />
			    <img src="img/nautica/r.jpg" alt="r" width="16" style="display: inline;" />
			</div>

И есть скрипт:

function HideFlag(flag){
        if(flag.is('img')){
            flag.animate({opacity: "hide"}, 300, "swing", function(){
                $("<span>"+flag.attr('alt')+"</span>").insertBefore(flag);
                HideFlag(flag.next());
            });
        }
    }
    function ShowFlag(flag){
        if(flag.is('img')){
            flag.prev().remove();
            flag.animate({opacity: "show"}, 300, "swing", function(){
                ShowFlag(flag.next('span').next());
            });
        }
    }

    $('.nautica .link a').click(function(){
        if($('#nautica_flags span').length){
            ShowFlag($('#nautica_flags img:first'));
        } else {
            HideFlag($('#nautica_flags img:first'));
        }

        return false;
    });

В ИЕ проблемма - скрывается нормально, а появляется только 3 рисунка :(

Нашол решение проблеммы, по непонятным причинам не во всех элементах менялся стиль display: inblock, изменение этого стиля перед анимацией исправило проблемму