wils0n
-
Posts
2 -
Joined
-
Last visited
wils0n's Achievements
Explorer (1/14)
0
Reputation
-
Если определ?н DOCTYPE, то не работает overflow:hidden (в IE)...
wils0n replied to wils0n's question in HTML Coding
спасибо огромное, рабтает!!! -
Если определ?н DOCTYPE, то не работает overflow:hidden (в IE)...
wils0n posted a question in HTML Coding
Пытаюсь сделать меню так, чтоб при наведение курсора мыши всплывал снизу див, который типа спрятан посредством свойства 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>