Buonasera, uso un menu a tendina che alla sua chiusura lascia visualizzare i bordi superiore e inferiore dell'elenco interno. Il tutto non si nota poiché a un'altezza settata su 0 - cui si aggiungono i bordi - viene aggiunta anche la trasparenza, ma vorrei eliminare il problema alla radice, indipendentemente dalla trasparenza (che con vecchie versioni di Explorer è ottenuta col filter alpha che però mi crea segnalazioni di errori nel css e che nell'esempio ho rimosso).
Riporto il codice di una pagina di esempio (da visualizzare con una qualsiasi versione di Explorer) che renderà più chiaro il tutto:
ho provato a modificare lo script aggiungendo al suo interno c.style.border=0 e c.style.border=1+'px', ma il bordo è scomparso del tutto. Potete suggerirmi come e dove modificare lo script?codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>...</title> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <script type="text/javascript"> <!-- var TINY={}; function T$(i){return document.getElementById(i)} function T$$(e,p){return p.getElementsByTagName(e)} TINY.dropdown=function(){ var p={fade:1,slide:1,active:0,timeout:200}, init=function(n,o){ for(s in o){p[s]=o[s]} p.n=n; this.build() }; init.prototype.build=function(){ this.h=[]; this.c=[]; this.z=1000; var s=T$$('ul',T$(p.id)), l=s.length, i=0; p.speed=p.speed?p.speed*.1:.5; for(i;i<l;i++){ var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i]; h.onmouseover=new Function(p.n+'.show('+i+',1)'); h.onmouseout=new Function(p.n+'.show('+i+')') } }; init.prototype.show=function(x,d){ var c=this.c[x], h=this.h[x]; clearInterval(c.t); clearInterval(c.i); c.style.overflow='hidden'; if(d){ if(p.active&&h.className.indexOf(p.active)==-1){h.className+=' '+p.active} if(p.fade||p.slide){ c.style.display='block'; if(!c.m){ if(p.slide){ c.style.visibility='hidden'; c.m=c.offsetHeight; c.style.height='0'; c.style.visibility='' }else{ c.m=100; c.style.opacity=0 } c.v=0 } if(p.slide){ if(c.m==c.v){ c.style.overflow='visible' }else{ c.style.zIndex=this.z; this.z++; c.i=setInterval(function(){slide(c,c.m,1)},20) } }else{ c.style.zIndex=this.z; this.z++; c.i=setInterval(function(){slide(c,c.m,1)},20) } }else{ c.style.zIndex=this.z; c.style.display='block' } }else{ c.t=setTimeout(function(){hide(c,p.fade||p.slide?1:0,h,p.active)},p.timeout) } }; function hide(c,t,h,s){ if(s){h.className=h.className.replace(s,'')} if(t){c.i=setInterval(function(){slide(c,0,-1)},20)}else{c.style.display='none'} } function slide(c,t,d){ if(c.v==t){ clearInterval(c.i); c.i=0; if(d==1){ if(p.fade){c.style.opacity=1} c.style.overflow='visible' } }else{ c.v=(t-Math.floor(Math.abs(t-c.v)*p.speed)*d); if(p.slide){c.style.height=c.v+'px'} if(p.fade){var o=c.v/c.m; c.style.opacity=o} } } return{init:init} }(); //--> </script> <style type="text/css"> <!-- * { margin:0; padding:0} #navbar { background-image: url(); background-repeat:repeat-x; border-left:1px solid #c8c6a1;border-right:1px solid #c8c6a1;height:30px; } #nav { position:relative; } ul.menu { list-style:none; width:880px; height:30px; padding-left:2px; margin:0 auto; background-image: url(); background-repeat:repeat-x; } ul.menu a { display:block; text-decoration:none; color:#999933; padding:0px 18px; font-family: Geneva, Verdana; font-size:12px; border-left:1px solid #c8c6a1;border-right:1px solid #c8c6a1; background-image: url(); background-repeat:repeat-x; } ul.menu a:hover {color: #818133; } ul.menu li {position:relative; display:inline; float:left; list-style:none; height:30px; line-height:30px; background-image:url();padding-left:2px; padding-right:2px;} ul.menu ul { display:none; position:absolute; top:32px; left:2px; right:2px; list-style:none; border:1px solid #5B5336; border-bottom-right-radius:10px; border-bottom-left-radius:10px; } ul.menu ul li {position:relative; width:100%; padding:0; background:none; height:auto} ul.menu ul li a {line-height:14px; padding:5px 0; color:#ccc; font-size:11px; border:none; background:none} ul.menu ul li a:hover {color:#000} /* fine menu orizzontale */ --> </style> </head> <body id="home"> <div id="navbar"> <div id="nav"> <ul class="menu" id="menu"> [*]menu <ul> [*]link [*]link [*]link [*]bla bla [*]bla bla [*]bla bla [*]bla bla [/list] [/list] </div> </div> <script type="text/javascript"> var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'}); </script> </body> </html>
Rispondi quotando