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

Tanchik · May 20, 2008

есть див с рейтингом в виде рисунка. при нажатии на этот рисунок, 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>

ZoNT · May 20, 2008

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

Tanchik · May 20, 2008

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

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

homm · May 20, 2008

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

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

Tanchik · May 20, 2008

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

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

ZoNT · May 20, 2008

homm! z-index в ИЕ работает не так как ты думаешь

ZoNT · May 20, 2008

спасибо, а есть еще варианты решения?!
перенести див в самый конец страницы в данном случае довольно проблематично

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

Tanchik · May 20, 2008

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

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

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

ARA · May 20, 2008

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

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

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

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

onclick="up(this)"

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

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

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

Tanchik · May 20, 2008

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

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

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

спб )

ZoNT · May 20, 2008

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

homm · May 20, 2008

homm! z-index в ИЕ работает не так как ты думаешь

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

Sign In

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

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information