Если определ?н DOCTYPE, то не работает overflow:hidden (в IE)...

wils0n · May 23, 2008

Пытаюсь сделать меню так, чтоб при наведение курсора мыши всплывал снизу див, который типа спрятан посредством свойства overflow: hidden у родительского дива. Вс? ништяк кроме ИЕ (в принципе как всегда:/)

Заметил такой прикол: если убрать DOCTYPE, работает, но тогда центральный главный div сносится влево, так как margin: 0px auto, больше не работает. Это, конечно, меньшая проблема, но хотелось бы решить первую и оставить DOCTYPE.

Код привед?н ниже.

Может кто знает, в ч?м прикол?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>[[''TITLE'']]</title>
	<style type="text/css">

		body {
			  margin: 0px; 
			padding: 0px; 
			border: 0px;
			background-color: #808080; 
			font-family: Arial;
			font-size: 14px;
		}

		#contain {
			width: 800px;
			display: block;
			margin: 0px auto;
			padding: 0px;
			border: 0px solid #000000;
		}

		#header {
			width: 800px;
			height: 162px;
			display: block;
			margin: 0px auto; 
			overflow: hidden;
			background-repeat: no-repeat;
			background-color: #FFFFFF;

		}

		.clear { 
			  clear:both; 
				  height:1px; 
				  overflow:hidden; 
				  line-height:1%; 
				  font-size:0px; 
				  margin-bottom:-1px; 
		} 

		/********** menu *************/
		#nav {
			margin:0px;
			padding:0px;
			z-index: 5000;
			width: 800px;
			height: 60px;
			border: 1px solid #000000;
			overflow: hidden;
			display: block;
		}


		.mbox {
			width: 160px;
			margin: -1px;
			height: 60px;
			overflow: hidden;
			float: left;
		}

		.item {
			position: relative;
			top: 0px;
			left: 35px;			
			width: 100px;
			height: 70px;
			margin: 0px;
			text-align: center;
		   border: 1px solid;
			z-index: 10;
		}

		.cover {
			position: relative;
			top: 0px;
			left: 0px;
			width: 160px;
			height: 61px;
			display: block;
			z-index: 100;
		}

	</style>
	<script type="text/javascript" language="JavaScript1.3">
		boxHeight = 60;
		boxHeight2 = boxHeight*boxHeight;

		over = new Array(false, false, false, false, false);

		function slideUp(elem, id)
		{
			if (!over[id]) return 0;
			y = parseInt(document.getElementById(elem).style.top);
			if (isNaN(y)) y=0;
			step = (boxHeight+y)*(boxHeight+y)*15/boxHeight2+2;
			y-=step;
			if (y<-boxHeight) {y=-boxHeight; return;}
			document.getElementById(elem).style.top = y+"px";
			setTimeout("slideUp('"+elem+"',"+id+")", 1);
			return 0;
		}

		function slideDown(elem, id)
		{
			if (over[id]) return 0;
			y = parseInt(document.getElementById(elem).style.top);
			if (isNaN(y)) y=0;
			if (y>=0) return 0;			
			step = y*y*15/boxHeight2+2;
			y+=step;
			document.getElementById(elem).style.top = y+"px";
			setTimeout("slideDown('"+elem+"', "+id+")", 1);
			return 0;
		}

	</script>
</head>
<body>

<div id="contain">
	<div id="header">
	</div>
	<div id="nav">
		<div class="mbox">
			<div class="cover" onmouseover='over[0]=true; return slideUp("menu0", 0);' onmouseout='over[0]=false; return slideDown("menu0", 0);'></div>
			<p class="item" id="menu0"></p>
		</div>
		<div class="mbox">
			<div class="cover" onmouseover='over[1]=true; return slideUp("menu1", 1);' onmouseout='over[1]=false; return slideDown("menu1", 1);'></div>
			<div class="item" id="menu1"></div>														
		</div>
		<div class="mbox">
			<div class="cover" onmouseover='over[2]=true; return slideUp("menu2", 2);' onmouseout='over[2]=false; return slideDown("menu2", 2);'></div>
			<div class="item" id="menu2"></div>														
		</div>
		<div class="mbox">
			<div class="cover" onmouseover='over[3]=true; return slideUp("menu3", 3);' onmouseout='over[3]=false; return slideDown("menu3", 3);'></div>
			<div class="item" id="menu3"></div>														
		</div>
		<div class="mbox">
			<div class="cover" onmouseover='over[4]=true; return slideUp("menu4", 4);' onmouseout='over[4]=false; return slideDown("menu4", 4);'></div>
			<div class="item" id="menu4"></div>														
		</div>
	</div>
	<div class="clear"> </div>
</div>

</body>
</html>

ZoNT · May 23, 2008

прикольная проблемка...

Пока могу посоветовать только держать P всегда в пределах общего дива и не топ им менять, а высоту от 0 до 60...

ZoNT · May 23, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>[[''TITLE'']]</title>
	<style type="text/css">

		body {
			  margin: 0px; 
			padding: 0px; 
			border: 0px;
			background-color: #808080; 
			font-family: Arial;
			font-size: 14px;
		}

		#contain {
			width: 800px;
			display: block;
			margin: 0px auto;
			padding: 0px;
			border: 0px solid #000000;
		}

		#header {
			width: 800px;
			height: 162px;
			display: block;
			margin: 0px auto; 
			overflow: hidden;
			background-repeat: no-repeat;
			background-color: #FFFFFF;

		}

		.clear { 
			  clear:both; 
				  height:1px; 
				  overflow:hidden; 
				  line-height:1%; 
				  font-size:0px; 
				  margin-bottom:-1px; 
		} 

		#nav {
			margin:0px;
			padding:0px;
			z-index: 5000;
			width: 800px;
			height: 60px;
			border: 1px solid red;
			overflow: hidden;
			display: block;
		}


		.mbox {
			position: relative;
			width: 160px;
			margin: -1px;
			height: 60px;
			overflow: hidden;
			float: left;
		}

		.item {
			position: absolute;
			top: 60px;
			left: 35px;
			width: 100px;
			height: 70px;
			margin: 0px;
			text-align: center;
			border: 1px solid #000;
		}

		.cover {
			position: relative;
			top: 0px;
			left: 0px;
			width: 160px;
			height: 61px;
			display: block;
		}

	</style>
	<script type="text/javascript" language="JavaScript1.3">
		boxHeight = 60;

		over = new Array(false, false, false, false, false);

		function slideUp(elem, id) {
			if (!over[id]) return 0;
			var y = parseInt(document.getElementById(elem).style.top);
			if (isNaN(y)) y=boxHeight;
			if (y<=0) return;
			y-=5;
			if (y<=0) y=0;
			document.getElementById(elem).style.top = y+"px";
			setTimeout("slideUp('"+elem+"',"+id+")", 3);
			return 0;
		}

		function slideDown(elem, id) {
			if (over[id]) return 0;
			var y = parseInt(document.getElementById(elem).style.top);
			if (isNaN(y)) y=0;
			if (y>=boxHeight) return 0;  
			y+=5;
			if (y>=boxHeight) y=boxHeight;
			document.getElementById(elem).style.top = y+"px";
			setTimeout("slideDown('"+elem+"', "+id+")", 3);
			return 0;
		}

	</script>
</head>
<body>

<div id="contain">
	<div id="header">
	</div>
	<div id="nav">
		<div class="mbox">
			<div class="item" id="menu0"></div>
			<div class="cover" onmouseover='over[0]=true; return slideUp("menu0", 0);' onmouseout='over[0]=false; return slideDown("menu0", 0);'></div>
		</div>
		<div class="mbox">
			<div class="item" id="menu1"></div>
			<div class="cover" onmouseover='over[1]=true; return slideUp("menu1", 1);' onmouseout='over[1]=false; return slideDown("menu1", 1);'></div>
		</div>
		<div class="mbox">
			<div class="item" id="menu2"></div>
			<div class="cover" onmouseover='over[2]=true; return slideUp("menu2", 2);' onmouseout='over[2]=false; return slideDown("menu2", 2);'></div>
		</div>
		<div class="mbox">
			<div class="item" id="menu3"></div>
			<div class="cover" onmouseover='over[3]=true; return slideUp("menu3", 3);' onmouseout='over[3]=false; return slideDown("menu3", 3);'></div>
		</div>
		<div class="mbox">
			<div class="item" id="menu4"></div>
			<div class="cover" onmouseover='over[4]=true; return slideUp("menu4", 4);' onmouseout='over[4]=false; return slideDown("menu4", 4);'></div>
		</div>
	</div>
	<div class="clear"> </div>
</div>

</body>
</html>

wils0n · May 25, 2008

спасибо огромное, рабтает!!!

ZoNT · May 25, 2008

пожалуйста...

Sign In

Если определ?н DOCTYPE, то не работает overflow:hidden (в IE)...

Question

wils0n

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

ZoNT

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

wils0n

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information