Форумы портала PHP.SU :: Перекрытие элементов

Помотрите пожалуйста ссылку http://exportgrain[dot]org/btn_proba.php -вот так должно работать меню, когда же я подвигаю кнопки ближе друг к другу происходит перекрытие элементов class="company_btn" и class="main_btn", и меню начинает работать не верно а именно так http://exportgrain[dot]org/btn_proba2.php Что можете посоветовать? Причем что интересно ИЕ отрабатывает как должно

CODE (html):
скопировать код в буфер обмена

 
<style>
.main_btn{
background: url(img/main_btn.png);
width: 158px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
z-index:2;
position:absolute;
margin-left:-30px;
}
#main_btn_block{
width: 70px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
margin-left:30px;
position:absolute;
}
.main_btn_hover{
background: url(img/main_btn_active.png);
width: 158px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
// margin-top:0px; /* для всех ie */
z-index:1;
position:absolute;
margin-left:-30px;
}
 
 
.company_btn{
background: url(img/company_btn.png);
width: 185px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
z-index:2;
position:absolute;
 
 
}
#company_btn_block{
 
width: 100px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
position:absolute;
margin-left:128px;
 
}
.company_btn_hover{
 
background: url(img/company_btn_active.png);
width: 185px; /* Ширина рисунка */
height: 74px; /*  Высота рисунка */
// margin-top:0px; /* для всех ie */
z-index:1;
position:absolute;
}
#menu{
position:absolute;
}
 
</style>
 
<div id="menu">
 
<div id="main_btn_block">
<p><a href="#" class="main_btn" usemap="#map"></a></p>
 
<p><a href="#" class="main_btn_hover"></a></p>
</div><!--main_btn_block-->
<div id="company_btn_block">
<p><a href="#" class="company_btn"></a></p>
<p><a href="#" class="company_btn_hover"></a></p>
</div><!--company_btn_block-->
</div>
 
 

CODE (javascript):
скопировать код в буфер обмена

 
<script src="js/jquery-1.7.1.min.js"></script>
 
 
 
 
 
<script type="text/javascript">
$(document).ready(function(){
        $('#main_btn_block').stop().mouseover(function(){
                $('.main_btn').fadeOut(500);
});
                
        $('#main_btn_block').stop().mouseleave(function(){
                $('.main_btn').fadeIn(500);
});
        $('#company_btn_block').stop().mouseover(function(){
                        $('.company_btn').fadeOut(500);
        });
                        
                $('#company_btn_block').stop().mouseleave(function(){
                        $('.company_btn').fadeIn(500);
        });
});
 
</script>
 

(Отредактировано автором: 29 Марта, 2013 - 18:27:38)