Sign in to follow this  
Tanchik

в IE6 просвечивает выпадающее окно

Recommended Posts

есть див с рейтингом в виде рисунка. при нажатии на этот рисунок, java скриптом поверх выводится див для ввода коммента к рейтингу.

но в IE6 див для коммента оказывается под дивом с рейтингом, и все кнопки неактивные.

у дива для коммента и у дива с рейтингом пробовала указать и z-index, и position в разных комбинациях, но не помогает

в IE7, Mozilla Firefox и Opera все работает.

Заранее спасибо за помощь! ;)

<style>
.user_soft
{
margin:0px 15px 5px 20px;
}
.user_soft a
{
color: #2786A8;
margin:0px;
text-decoration:underline;
}
.user_soft a:hover
{
color:#4864d6;
}
.user_soft img
{
margin:0px 2px -4px 0px;
}
.user_soft p
{
color:#181919;
margin:5px 15px 0px 23px;
padding:0px 0px 10px 0px;
}
.sm_main
{
height: 25px;
margin:0px 0px 8px 40px;
position: relative;
}

.sm_personal_log
{
float: left;
width: 85px;
height: 20px;
margin-top:-2px;
position: relative;
}

.sm_outer
{
width: 85px;
height: 15px;
background: url(/img_content/stars111.gif) no-repeat 0px 1px;
}
.sm_inner
{
width: 0;
height: 15px;
background: url(/img_content/stars111.gif) no-repeat 0px -14px;
}

.sm_main a
{
position: absolute;
display: block;
left: 0;
top: 0;
height: 20px;
cursor:pointer;
}

.sm_main a:hover
{
background: url(/img_content/stars111.gif) no-repeat 0px -44px;
}
.sm_main a.s1 { width: 15px; }
.sm_main a.s2 { width: 30px; }
.sm_main a.s3 { width: 45px; }
.sm_main a.s4 { width: 60px; }
.sm_main a.s5 { width: 75px; }

.sm_rating_text
{
float:left;
font-size:12px;
height:20px;
}
.sm_votes
{
font-size:9px;
height:20px;
color:gray;
margin-left:90px;
}
.sm_votes a
{
position: relative;
display: inline;
color: gray;
}
.sm_votes a:hover
{
background: none;
position: relative;
display: inline;
}
.rate_win
{
position: absolute;
top: 20px;
left: 0px;
background: url(/img_content/reasonback.gif) top left no-repeat;
background-color: #f4f5f7;
padding: 10px 20px 7px;
z-index:5;
border: 1px solid #86b8cd;
width: 250px;
height: 170px;
}
.reason_txt
{
font-size: 11px;
font-weight: bold;
color: #3e849e;
}
.reason_area
{
border: 1px solid #d0d5dd;
margin: 10px 0px 7px;
padding: 0px;
font-size: 12px;
}
.reason_subm
{
font-size: 11px;
height: 19px;
width: 80px;
background: url(/img_content/reasonsubm.gif) no-repeat 0px 0px;
border: none;
cursor: pointer;
}
.reason_cancel
{
font-size: 11px;
height: 19px;
width: 80px;
background: url(/img_content/reasoncancel.gif) no-repeat 0px 0px;
border: none;
margin-left:4px;
cursor: pointer;
}
.reason_btns
{
text-align: right;
}

</style>

<div class="user_soft">
<div class="sm_main">
<div class="sm_personal_log" style="display: block;">
<div class="sm_outer">
<div class="sm_inner" style="width: 75px;"></div>
<a title="5" href="" class="s5"></a>
<a title="4" href="" class="s4"></a>
<a title="3" href="" class="s3"></a>
<a title="2" href="" class="s2"></a>
<a title="1" href="" class="s1"></a>
</div>
</div>
<div class="sm_votes">(2 votes) Your vote is 5 <a href="">Delete vote</a></div>
<div style="display: block;">
<div class="rate_win">
<div class="reason_txt">Please give reasons for your vote:</div>
<textarea cols="33" rows="2" class="reason_area" name="reason"></textarea>
<div class="reason_btns">
<input value="submit" class="reason_subm" type="button">
<input value="cancel" class="reason_cancel" type="button">
</div>
</div>
</div>
</div>
</div>

<div class="user_soft">
<div class="sm_main">
<div class="sm_personal_log" style="display: block;">
<div class="sm_outer">
<div class="sm_inner" style="width: 30px;"></div>
<a title="5" href="" class="s5"></a>
<a title="4" href="" class="s4"></a>
<a title="3" href="" class="s3"></a>
<a title="2" href="" class="s2"></a>
<a title="1" href="" class="s1"></a>
</div>
</div>
<div class="sm_votes">(38 votes) Your vote is 2 <a href="">Delete vote</a></div>
<div style="display: none;">сюда подгружается такой же блок Reason</div>
</div>
</div>

i-19.jpg

Share this post


Link to post
Share on other sites

надо помещать всплывающий див для коммента в дереве документа после вашего рейтинга, тогда рейтинг его не будет перекрывать... А лучше вообще позже всех (в конце самом), тогда он будет перекрывать всех... Сейчас он скорее всего цепляется к диву на который хотите оставить коммент, а желательное го аппендить к боди и позиционировать в конец дива...

Share this post


Link to post
Share on other sites

спасибо, а есть еще варианты решения?!

перенести див в самый конец страницы в данном случае довольно проблематично

Share this post


Link to post
Share on other sites
надо помещать всплывающий див для коммента в дереве документа после вашего рейтинга, тогда рейтинг его не будет перекрывать... А лучше вообще позже всех (в конце самом), тогда он будет перекрывать всех... Сейчас он скорее всего цепляется к диву на который хотите оставить коммент, а желательное го аппендить к боди и позиционировать в конец дива...

ZoNT, для того что-бы управлять расположением, не нужно делать магические пасы с перемещением блоков, для этого придумали z-index.

Share this post


Link to post
Share on other sites
ZoNT, для того что-бы управлять расположением, не нужно делать магические пасы с перемещением блоков, для этого придумали z-index.

ну я же использую z-index, но он не срабатывает. или я его не корректно использую?!

Share this post


Link to post
Share on other sites
спасибо, а есть еще варианты решения?!

перенести див в самый конец страницы в данном случае довольно проблематично

Не вижу никаких проблем...

Share this post


Link to post
Share on other sites
Не вижу никаких проблем...

а можете примерный код написать для таких чайников, как я?

у меня идет стр со списком этих программ и голосование за них. список может быть разной величины. как же тогда, поместив рейтинг вниз, вычислить его координаты точные? прости, но я не понимаю ;)

Share this post


Link to post
Share on other sites

все должно работать

вот код который будет присваевать уровень для z-index

	<script type="text/javascript">
<!--
var zIndex = 100;
function up(what){
zIndex++;
what.style.zIndex = zIndex;
}
//-->
</script>

а вот это сунте в блок, по кторому будете кликать (да хоть в несколько сразу)

onclick="up(this)"

перенести див в самый конец страницы в данном случае довольно проблематично

проще простого, этот же блок не виден изначально? он "вылетает" после определенного события, так ведь?

могут быть проблемы возникнуть, если какие либо события будут выполнятся в таблице, тоесть "онклик" сработает "в том" тэге, тогда просто помещаете все в див, и событие указваете для него

Share this post


Link to post
Share on other sites
проще простого, этот же блок не виден изначально? он "вылетает" после определенного события, так ведь?

этот блок подгружается аяксом в то место, куда кликнешь и сколько раз кликнешь, столько и подгрузится...

а код, предложенный тобой, не совсем то, что мне нужно....ты предлагаешь повышать z-index у звездочек, на которые нужно кликнуть, чтоб появился этот невидимый блок. а мне нужно как раз таки не звездочки, а этот блок вынести вперед

спб )

Share this post


Link to post
Share on other sites

ну так если он подгружается скриптом, то кто ж тебе запрещает его аппендить не туда, где ты кликнул, а к документ.боди, а координаты получать из того элемента на котором кликнул?

Share this post


Link to post
Share on other sites
homm! z-index в ИЕ работает не так как ты думаешь ;)

Там бывают проблемы, но двигать весь контент точно не приходится никогда. Основной совет ? вынести всплываюший блок на тот-же уровень что и контент который перекрывает.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,502
    Total Members
    3,128
    Most Online
    JamesAPatel
    Newest Member
    JamesAPatel
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.