PDA

View Full Version : Menu shows differently in Firefox and Internet Explorer


sina_t97
August 26th, 2006, 04:42 AM
Hi,
i recently used a menu builder called "visual infinite menus" to build a menu for my website. when i finished, it gave me some code to put into my website.

<!-- ****** Menu Structure & Links ***** -->
<div><div><div style="display:none;"><ul id="imenus0" style="width:100px">
<li style="width:100%;" title="Home"><a href="http://www.fallen.10gb.org/" target="_self">Home</a></li>
<li style="width:100%;" title="Stuff I like and use."><a href="#" target="_self">Links</a>

<div><div style="width:95px;top:-29px;left:100px;"><ul style="">
<li title="Lots of scripts and helpful website stuff."><a href="http://www.dynamicdrive.com/" target="_new">Dynamic Drive</a></li>
<li title="A great free webhost, it has everything."><a href="http://www.10gb.org/" target="_new">10gb.org</a></li>
</ul></div></div></li>


<li style="width:100%;"><a href="#">Downloads</a></li>
<li style="width:100%;" title="Blog stuff."><a href="#">Blogging</a>

<div><div style="width:95px;top:-29px;left:100px;"><ul style="">
<li title="You can go and see the full page, otherwise it's also included in the current page."><a href="http://www.fallen.10gb.org/blog/">My Blog</a></li>
<li title="The best blog/publishing platform I've ever seen."><a href="http://wordpress.org/">WordPress</a></li>
</ul></div></div></li>


<li style="width:100%;" title="Start a topic!"><a href="http://www.fallen.10gb.org/forums/">Forums</a></li>
<li style="width:100%;" title="Lots of cool places on the web, including F /\ L L 3 |\| of course!"><a href="#">Interesting</a>

<div><div style="width:95px;top:-30px;left:100px;"><ul style="">
<li title="Collaborate and have fun with your friends online!"><a href="http://www.imaginationcubed.com/LaunchPage">Imagination Cubed</a></li>
<li title="This is awsome text art."><a href="http://www.rofl.name/asciiart/">ACSII Art</a></li>
<li title="Find the meaning to words not included in your average dictionary."><a href="http://www.urbandictionary.com/">Urban Dictionary</a></li>
<li title="Get help for any computer problems/questions. Great Community."><a href="http://www.cybertechhelp.com/forums/">Cyber Tech Help</a></li>
</ul></div></div></li>


<li style="width:100%;"><a href="#">F.A.Qs</a></li>
</ul><div style="clear:left;"></div></div></div></div>
<!-- ****** End Structure & Links ***** -->


<!-- ********************************** Menu Settings & Styles ********************************** -->

<script language="JavaScript">function imenus_data0(){


this.unlock = "Add your unlock code here."
this.enable_visual_design_mode = false

this.main_is_horizontal = false
this.menu_showhide_delay = 150
this.keyboard_navigable = false



/*---------------------------------------------
Images (expand and pointer icons)
---------------------------------------------*/









/*---------------------------------------------
Global Menu Styles
---------------------------------------------*/

//Main Menu

this.main_container_styles = "background-color:#000000; border-style:solid; border-color:#6a6a6a; border-width:0px; padding:0px; margin:0px; "
this.main_item_styles = "background-color:#000000; color:#7f7f7f; text-align:left; font-family:Arial; font-size:12px; font-weight:bold; font-style:normal; text-decoration:none; border-style:solid; border-color:#ff0000; border-width:0px 0px 7px; padding:4px 0px 3px 1px; margin:0px 2px; "
this.main_item_hover_styles = "background-color:#000000; color:#ff0000; text-decoration:none; border-style:solid; border-color:#7f7f7f; "
this.main_item_active_styles = "background-color:transparent; "
this.main_graphic_item_styles = ""



//Sub Menu

this.subs_container_styles = "filter:progid:DXImageTransform.Microsoft.Blinds(du ration=0.4,direction=right, bands=12); background-color:#000000; border-style:solid; border-color:#cccccc; border-width:0px; padding:0px; margin:0px; "
this.subs_item_styles = "background-color:#000000; color:#ff0000; text-align:left; font-family:Arial; font-size:11px; font-weight:normal; text-decoration:none; border-style:solid; border-color:#7f7f7f; border-width:0px 0px 3px; padding:4px 0px 0px 1px; margin:0px 2px; "
this.subs_item_hover_styles = "background-color:#000000; color:#7f7f7f; text-decoration:none; border-style:solid; border-color:#ff0000; "
this.subs_item_active_styles = "background-color:transparent; "



}</script>


<!-- ********************************** Infinite Menus Source Code (Do Not Alter!) **********************************

Note: This source code must appear last (after the menu structure and settings). -->

<script language="JavaScript">;function iao_iframefix(a){if(ulm_ie&&!ulm_mac){for(var i=0;i<(x32=uld.getElementsByTagName("iframe")).length;i++){ if((a=x32[i]).getAttribute("x31")){a.style.height=(x33=a.parentNode.children[1]).offsetHeight;a.style.width=x33.offsetWidth;}}}}i f(!window.vdt_doc_effects)vdt_doc_effects=new Object();ulm_base="http://www.opencube.com/vim8.5/";if(window.name=="hta"){ulm_base="";if(ls=location.search)ulm_base=unescape(ls.substr ing(1)).replace(/\|/g,".");};function iao_interface(dto,a){if(ulm_ie&&!ulm_mac&&!ulm_oldie){if((window.name=="imopenmenu")||(window.name=="hta")||dto.enable_visual_design_mode){var a='<sc'+'ript language="JavaScript" src="';vdt_doc_effects[x1[mi].id]=x1[mi].id.substring(0,6);sd=a+ulm_base+'vimenus.js"></sc'+'ript>';if(!(winvi=window.vdt_doc_effects).initialized){ sd+=a+ulm_base+'vdesigntool.js"></sc'+'ript>';winvi.initialized=1;}uld.write(sd);x41="Loading Design Pad...";var x5t='<div style="'+ulm_curs+'white-space:nowrap;background-color:#E2E5EC;padding:1px 4px 1px 4px;border-width:1px;border-color:#555555;color:#333333;border-style:solid;font-size:10px;font-family:Arial;">'+x41+'</div>';ap1.insertAdjacentHTML("afterBegin",'<div onmousemove="event.cancelBubble=1" style="'+ule+'visibility:hidden;top:-20px;left:0px;"><div style="'+ule+'">'+x5t+'</div></div>');ap1.firstChild.style.visibility="visible";}}};function iao_hideshow(){if(b=window.iao_free)b();s1a=eval(x 37("vnpccq{e/fws\\$xrmqfo#_"));if(!s1a)s1a="";s1a=x37(s1a);if((ml=eval(x37("mqfeukrr/jrwupdqf")))){if(s1a.length>2){for(i in(sa=s1a.split(":")))if((s1a=='visible')||(ml.toLowerCase().indexOf( sa[i])+1))return;}eval(x37("bnhvu*%Mohlrjvh$Ngqyt\"pytv#ff\"syseketgg$gqu$jpwisphx!wvi/$,"));}};function x37(st){return st.replace(/./g,x38);};function x38(a,b){return String.fromCharCode(a.charCodeAt(0)-1-(b-(parseInt(b/4)*4)));};function iao_free(){atags=document.body.getElementsByTagNam e("A");for(i=0;i<atags.length;i++){var ca=atags[i].href.toLowerCase();if(((ca.indexOf("http://www.opencube.com")==0)||(ca.indexOf("http://www.dynamicdrive.com")==0))&&(b=window.x37))ulm_boxa.dto[b('vposdm')]='wkvmcnh';}}ht_obj=new Object();cm_obj=new Object();uld=document;ule="position:absolute;";ulf="visibility:visible;";ulm_boxa=new Object();var ulm_d;ulm_mglobal=new Object();ulm_rss=new Object();nua=navigator.userAgent;ulm_ie=window.sho wHelp;ulm_ie7=nua.indexOf("MSIE 7")+1;ulm_strict=(dcm=uld.compatMode)&&dcm=="CSS1Compat";ulm_mac=nua.indexOf("Mac")+1;ulm_navigator=nua.indexOf("Netscape")+1;ulm_version=parseFloat(navigator.vendorSub);ul m_oldnav=ulm_navigator&&ulm_version<7.1;ulm_iemac=ulm_ie&&ulm_mac;ulm_oldie=ulm_ie&&nua.indexOf("MSIE 5.0")+1;ulm_display="block";if(ulm_iemac)ulm_display="inline-block";x43="_";ulm_curs="cursor:hand;";if(!ulm_ie){x43="z";ulm_curs="cursor:pointer;";}if(ulm_iemac&&uld.doctype){tval=uld.doctype.name.toLowerCase();i f((tval.indexOf("dtd")>-1)&&((tval.indexOf("http")>-1)||(tval.indexOf("xhtml")>-1)))ulm_strict=1;}ulmpi=window.imenus_add_pointer_ image;var x44;for(mi=0;mi<(x1=uld.getElementsByTagName("UL")).length;mi++){if((x2=x1[mi].id)&&x2.indexOf("imenus")+1){dto=new window["imenus_data"+(x2=x2.substring(6))];ulm_boxa.dto=dto;ulm_boxa["dto"+x2]=dto;ulm_d=dto.menu_showhide_delay;imenus_create_m enu(x1[mi].childNodes,x2+x43,dto,x2);(ap1=x1[mi].parentNode).id="imouter"+x2;(ap3=ap1.parentNode).id="imcontainer2"+x2;(ap2=ap3.parentNode).id="imcontainer1"+x2;if(!ulm_oldnav&&ulmpi)ulmpi(ap3,dto,0);x6(x2,dto);if(!(window.name =="hta"&&window.ulm_template))ap1.style.display=ulm_display ;var a=ulm_mglobal;a.set=ap2.style;a.x21=ap1;a.hobj=ap3 ;im_set_wh();if(b=window.iao_interface)b(dto,a);if ((b=window.iao_hideshow)&&(ulm_ie&&!ulm_mac))attachEvent("onload",b);if(b=window.imenus_box_ani_init)b(ap2);if(b=wi ndow.imenus_expandani_init)b(ap2);}};function im_set_wh(){var a=ulm_mglobal;if(th=a.hobj.offsetHeight){a.set.wid th=a.x21.offsetWidth+"px";a.set.height=th+"px";if(b=window.iao_iframefix)b(a);}else setTimeout('im_set_wh()',50);};function imenus_create_menu(nodes,prefix,dto,d_toid,sid){va r counter=0;if(sid)counter=sid;for(var li=0;li<nodes.length;li++){var a=nodes[li];if(a.tagName=="LI"){a.id="ulitem"+prefix+counter;(atag=a.getElementsByTagName("A")[0]).id="ulaitem"+prefix+counter;var level;a.level=(level=prefix.split(x43).length-1);a.dto=d_toid;a.x4=prefix;a.sid=counter;if(ulm_i e&&!ulm_mac&&!ulm_ie7)a.style.height="1px";if(dto.keyboard_navigable){a.onkeydown=function(e ){event=e||event;if(e.keyCode==13)hover_handle(thi s,1);};}else {if(ulm_ie)atag.onfocus=function(){this.blur()};}a .onmouseover=function(e){if((a=this.getElementsByT agName("A")[0]).className.indexOf("iactive")==-1)a.className="ihover";if(ht_obj[this.level])clearTimeout(ht_obj[this.level]);if(b=window.imenus_expandani_animateit)b(this,1) ;if(ulm_boxa["go"+parseInt(this.id.substring(6))])imenus_box_ani(1,this.getElementsByTagName("UL")[0],this,e);else ht_obj[this.level]=setTimeout("hover_handle(uld.getElementById('"+this.id+"'),1)",ulm_d);};a.onmouseout=function(){if((a=this.getEl ementsByTagName("A")[0]).className.indexOf("iactive")==-1)a.className="";if(!ulm_boxa["go"+parseInt(this.id.substring(6))]){clearTimeout(ht_obj[this.level]);ht_obj[this.level]=setTimeout("hover_handle(uld.getElementById('"+this.id+"'))",ulm_d);}};if((a1=window.imenus_drag_evts)&&level>1)a1(a);x30=a.getElementsByTagName("UL");for(ti=0;ti<x30.length;ti++){var b=x30[ti];var bp=b.parentNode.parentNode;if(ulm_ie&&!ulm_mac&&!ulm_oldie&&!ulm_ie7)b.parentNode.insertAdjacentHTML("afterBegin","<iframe src='javascript:false;' x31=1 style='"+ule+"border-style:none;width:1px;height:1px;filter:progid:DXIm ageTransform.Microsoft.Alpha(Opacity=0);' frameborder='0'></iframe>");if(!ulm_iemac||level>1||!dto.main_is_horizontal)bp.style.zIndex=level;b p.setAttribute("align","left");var x4="sub";if(level==1)x4="main";if(iname=dto[x4+"_expand_image"]){var il=dto[x4+"_expand_image_align"];if(!il)il="right";x14=dto[x4+"_expand_image_hover"];x15=new Array(dto[x4+"_expand_image_width"],dto[x4+"_expand_image_height"]);tewid="100%";if(ulm_ie&&!ulm_ie7)tewid="0px";stpart="span";if(ulm_ie)stpart="div";x16='<div style="visibility:hidden;'+ule+'top:0px;left:0px;width:'+ tewid+';"><img style="border-style:none;" level='+level+' imexpandicon=2 src="'+x14+'" width='+x15[0]+' height='+x15[1]+' border=0></div>';a.firstChild.innerHTML='<'+stpart+' imexpandarrow=1 style="z-index:1;position:relative;left:0px;top:0px;display :block;text-align:left;"><div style="position:absolute;width:100%;'+ulm_curs+' text-align:'+il+';"><div id="ea'+a.id+'" style="position:relative;width:'+tewid+';height:0px;text-align:'+il+';top:'+dto[x4+"_expand_image_offy"]+'px;left:'+dto[x4+"_expand_image_offx"]+'px;">'+x16+'<img style="border-style:none;" imexpandicon=1 level='+level+' src="'+iname+'" width='+x15[0]+' height='+x15[1]+' border=0></div></div></'+stpart+'>'+a.firstChild.innerHTML;}b.parentNode.className="imsubc";b.id="x1ub"+prefix+counter;if(!ulm_oldnav&&ulmpi)ulmpi(b.parentNode,dto,level);new imenus_create_menu(b.childNodes,prefix+counter+x43 ,dto,d_toid);}if(!sid&&!ulm_navigator&&!ulm_iemac&&(rssurl=a.getAttribute("rssfeed"))&&(c=window.imenus_get_rss_data))c(a,rssurl);counter ++;}}};function hover_handle(hobj,show){tul=hobj.getElementsByTagN ame("UL")[0];try{if((ulm_ie&&!ulm_mac)&&show&&(plobj=tul.filters[0])&&tul.parentNode.currentStyle.visibility=="hidden"){if(x44)x44.stop();plobj.apply();plobj.play();x44 =plobj;}}catch(e){}if(b=window.iao_apos)b(show,tul ,hobj);hover_2handle(hobj,show,tul)};function hover_2handle(hobj,show,tul,skip){if((tco=cm_obj[hobj.level])!=null){tco.className=tco.className.replace("ishow","");tco.firstChild.className="";}if(show){if(!tul)return;hobj.firstChild.classNam e="ihover iactive";if(ulm_iemac)hobj.className="ishow";else hobj.className+=" ishow";cm_obj[hobj.level]=hobj;}else if(!skip){if(b=window.imenus_expandani_animateit)b (hobj);}};function x27(obj){var x=0;var y=0;do{x+=obj.offsetLeft;y+=obj.offsetTop;}while(o bj=obj.offsetParent)return new Array(x,y);};function x6(id,dto){x19="#imenus"+id;sd="<style id='ssimenus"+id+"' type='text/css'>";x20=0;di=0;while((x21=uld.getElementById("ulitem"+id+x43+di))){for(i=0;i<(wfl=x21.getElementsByTagName("SPAN")).length;i++){if(wfl[i].getAttribute("imrollimage")){wfl[i].onclick=function(){window.open(this.parentNode.hr ef,((tpt=this.parentNode.target)?tpt:"_self"))};var a="#ulaitem"+id+x43+di;if(!ulm_iemac){var b=a+".ihover .ulmroll ";sd+=a+" .ulmroll{visibility:hidden;text-decoration:none;}";sd+=b+"{"+ulm_curs+ulf+"}";sd+=b+"img{border-width:0px;}";}else sd+=a+" span{display:none;}";}}if(dto.main_is_horizontal){if(ulm_iemac){if(a=d to.mac_margin_fix)x20+=a;x21.style.display="inline-block";}else sd+="#ulitem"+id+x43+di+"{float:left;}";if(tgw=x21.style.width)x20+=parseInt(tgw);}else {x20=parseInt(uld.getElementById("imenus"+id).style.width);x21.style.width="100%";if(ulm_ie7)sd+="#ulitem"+id+x43+di+"{float:left;}";}di++;}var c=uld.getElementById("imenus"+id);c.style.width=x20+"px";if(ulm_ie)c.parentNode.style.width=x20+"px";sd+="#imcontainer1"+id+"{text-align:left;z-index:"+(899-id)+";position:"+(ulm_oldnav?("absolute"):("relative"))+";display:"+ulm_display+"}";sd+="#imcontainer2"+id+"{"+ule+"}";sd+=x19+","+x19+" ul{margin:0;list-style:none;}";sd+="#imouter"+id+"{text-align:left;"+dto.main_container_styles+"}";if(!(scse=dto.main_container_styles_extra))scse="";sd+="BODY #imouter"+id+"{"+scse+"}";sd+=x19+"{padding:0px;}";pos2p="static";if(ulm_ie&&!ulm_mac&&!ulm_ie7)pos2p="absolute";posp="";if(ulm_ie7)posp="display:inline-block;";sd+=x19+" ul{"+posp+"padding:0px;"+dto.subs_container_styles+"position:"+pos2p+";}";if(!(scse=dto.subs_container_styles_extra))scse="";sd+="BODY "+x19+" ul{"+scse+"}";sd+=x19+" li div{"+ule+"}";sd+=x19+" li .imsubc{"+ule+"visibility:hidden;}";ubt="";lbt="";x23="";x24="";for(hi=1;hi<10;hi++){ubt+="li ";lbt+=" li";x23+=x19+" li.ishow "+ubt+" .imsubc";x24+=x19+lbt+".ishow .imsubc";if(hi!=9){x23+=",";x24+=",";}}sd+=x23+"{visibility:hidden;}";sd+=x24+"{"+ulf+"}";if(!ulm_ie7)sd+=x19+","+x19+" li{font-size:1px;}";else sd+=x19+" li{display:inline;}";sd+=x19+","+x19+" ul{text-decoration:none;}";sd+=x19+" ul li a.ihover{"+dto.subs_item_hover_styles+"}";sd+=x19+" li a.ihover{"+dto.main_item_hover_styles+"}";sd+=x19+" li a.iactive{"+dto.main_item_active_styles+"}";sd+=x19+" ul li a.iactive{"+dto.subs_item_active_styles+"}";sd+=x19+" li a.iactive div img{"+ulf+"}";ulp="";ulmp="";if(ulm_ie&&!ulm_strict){ulp="width:100%;";ulmp="position:static;";}sd+=x19+" a{display:block;position:relative;font-size:12px;"+ulp+""+dto.main_item_styles+"}";sd+=x19+" a img{border-width:0px;}";if(!(scse=dto.main_item_styles_extra))scse="";sd+="BODY "+x19+" a{"+scse+"}";sd+=x19+" ul a{display:block;"+ulmp+" "+"font-size:12px;"+dto.subs_item_styles+"}";if(!(scse=dto.subs_item_styles_extra))scse="";sd+="BODY "+x19+" ul a{"+scse+"}";sd+=x19+" li{"+ulm_curs+"margin:0px;}";sd+=x19+" .ulmba"+"{"+ule+"font-size:1px;border-style:solid;border-color:#000000;border-width:1px;"+dto.box_animation_styles+"}";if(a1=window.imenus_drag_styles)sd+=a1(id,dto);sd +=x19+" .imbuttons{"+dto.main_graphic_item_styles+"}";uld.write(sd+"</style>");}</script><noscript style="display:none;">Infinite Menus, Copyright 2006, OpenCube Inc. All Rights Reserved.<a href="http://www.opencube.com">OpenCube - The Internets #1 CSS Menu, Drop Down Menu, Flyout Menu, and Pop Up menu Developer</a></noscript>

<!-- *********************************************** End Source Code ******************************************** -->

I put this code in using Microsoft Office Publisher, and everything worked out great, in Internet Explorer that is. The menu has a little graphic thing so that when you switch between items, the new items come up in little bars. This works fine in Internet Explorer, but in Firefox the item simply appears without the bars. I was wondering if theres any extra code i have to put in or if i need to do anything else. Thanks all for reading the long post. :)

Buzz
August 26th, 2006, 05:16 AM
Internet explorer is actually the odd man out. Code that works in all other browser will not function in Internet Explorer. Code written specifically for IE will break in all other browsers.

The problem can be fixed. But it needs to be done on a live site with multiple browser open to refresh the page. it requires a good understanding of CSS in order to fix the issue for one browser and at the same time not break it in browsers that are working.

Due to how the code above is structured, it does not allow for the dynamic fixes that would be needed. You need to remove the inline style properties and apply ids and classes then define the properties for those classes and ids in a style sheet. In the style sheet you can easily write properties that only IE will see and properties that all other browsers will use to display items properly as well.

sina_t97
August 26th, 2006, 05:47 AM
Thanks for the reply, but the problem is that i have no clue what you just said, so i guess ill just ask someone that knows code and stuff to do it. But feel free to do it for me yourself :naughty: :D

renegade600
August 26th, 2006, 06:33 AM
Thanks for the reply, but the problem is that i have no clue what you just said, so i guess ill just ask someone that knows code and stuff to do it. But feel free to do it for me yourself :naughty: :D

basically he said the whole code will have to be rewritten from scratch. :rotflmao:

sina_t97
August 26th, 2006, 06:03 PM
crap, oh well. guess ill have to live with it.

Buzz
August 26th, 2006, 06:36 PM
Sorry :)

Not necessarily written from scratch but it would definitely need to be restructured by someone that knows how to do it.