hello guys,i have a website at http://pruettfamilyhistory.com/enter/ I have a Hover menu which i have made using fynmenu module. Its working fine in IE,Opera,Netscape,Safari,But is giving displaying in vertical manner in Firefox. You can check this screenshot also... This is just my problem. But after clicking on any one of a link on that hover part,it get right in this way, I need it like this only... So kindly help me friends. Any good replies will be awarded with 10$ paypal. PM ME NOW AND GET YOUR 10$ FOR HELPING ME.
My pruettfamilyhistory.com/enter/templates/rhuk_solarflare_ii/css/template_css.css is..... /* CSS Document */ html { height: 100%; } body { height: 100%; } .clr { clear: both; } .outline { border: 1px solid #cccccc; background: #ffffff; padding: 2px; } #buttons_outer { width: 635px; margin-bottom: 2px; margin-right: 2px; float: left; } #buttons_inner { border: 1px solid #cccccc; height: 21px !important; height: 23px; } #pathway_text { overflow: hidden; display: block; height: 25px; line-height: 25px !important; line-height: 22px; padding-left: 4px; border: 1px solid #ccc; margin-bottom: 2px; } #pathway_text img { margin-left: 5px; margin-right: 5px; margin-top: 6px; } #buttons { float: left; margin: 0px; padding: 0px; width: auto; } ul#mainlevel-nav { list-style: none; padding: 0; margin: 0; font-size: 0.8em; } ul#mainlevel-nav li { font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: none; background-image: none; padding-left: 0px; padding-right: 0px; float: left; margin: 0; font-size: 11px; font-style: normal; line-height: normal; font-weight: normal; white-space: nowrap; font-variant: normal; border-right: 1px solid #cccccc; } ul#mainlevel-nav li a { display: block; padding-left: 15px; padding-right: 15px; text-decoration: none; color: #693434; background: transparent; } #buttons>ul#mainlevel-nav li a { width: auto; } ul#mainlevel-nav li a:hover { color: #9d6969; } #search_outer { float: left; width: 165px; } #search_inner { border: 1px solid #cccccc; padding: 0px; height: 21px !important; height: 23px; overflow: hidden; } #search_inner form { padding: 0; margin: 0; } #search_inner .inputbox { border: 0px; padding: 3px 3px 3px 5px; font-family: arial, helvetica, sans-serif; font-size: 11px; color: #c64934; } #header_outer { text-align: left; border: 0px; margin: 0px; } #header { float: left; padding: 0px; margin-right: 2px; width: 635px; height: 150px; background: url(../images/header_short.jpg) no-repeat; } #top_outer{ float: left; width: 165px; } #top_inner { border: 1px solid #cccccc; padding: 2px; height: 144px !important; height: 150px; overflow: hidden; float: none !important; float: left; } #left_outer { float: left; margin-top: 2px; width: 165px; } #left_inner { border: 1px solid #cccccc; padding: 2px; float: none !important; float: left; } #content_outer { padding: 0px; margin-top: 0px; margin-left: 2px; /** border: 1px solid #cccccc; **/ float: left; width: 635px; } #content_inner{ float: none !important; float: left; padding: 0; padding-top: 2px; margin: 0; } table.content_table { width: 100%; padding: 0px; margin: 0px; } table.content_table td { padding: 0px; margin: 0px; } #banner_inner { float: left; padding: 0px; height: 70px; } #poweredby_inner { float: right; padding: 0px; margin-left: 0px; height: 70px; } #right_outer { margin-left: 2px; width: 165px; } #right_inner { float: none !important; float: left; border: 1px solid #cccccc; padding: 2px; } .user1_inner { border: 1px solid #cccccc; float: none !important; float: left; margin: 0px; padding: 2px; } .user2_inner { border: 1px solid #cccccc; float: none !important; float: left; margin: 0px; padding: 2px; } table td.body_outer { } .maintitle { color: #ffffff; font-size: 40px; padding-left: 15px; padding-top: 20px; } .error { font-style: italic; text-transform: uppercase; padding: 5px; color: #cccccc; font-size: 14px; font-weight: bold; } /** old stuff **/ .back_button { float: left; text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; width: auto; background: url(../images/button_bg.png) repeat-x; padding: 0px 10px; line-height: 20px; margin: 1px; } .pagenav { text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; width: auto; background: url(../images/button_bg.png) repeat-x; padding: 0px 10px; line-height: 20px; margin: 1px; } .pagenavbar { margin-right: 10px; float: right; } #footer { text-align: center; padding: 3px; } ul { margin: 0; padding: 0; list-style: none; } li { line-height: 15px; padding-left: 15px; padding-top: 0px; background-image: url(../images/arrow.png); background-repeat: no-repeat; background-position: 0px 2px; } td { text-align: left; font-size: 11px; } body { height: 100%; padding: 0px; font-family: Arial, Helvetica, Sans Serif; line-height: 120%; font-size: 11px; color: #333333; background: #ffffff; } /* Joomla core stuff */ a:link, a:visited { color: #c64934; text-decoration: none; } a:hover { color: #900; text-decoration: none; } table.contentpaneopen { width: 100%; padding: 0px; border-collapse: collapse; border-spacing: 0px; margin: 0px; } table.contentpaneopen td { padding-right: 5px; } table.contentpaneopen td.componentheading { padding-left: 4px; } table.contentpane { width: 100%; padding: 0px; border-collapse: collapse; border-spacing: 0px; margin: 0px; } table.contentpane td { margin: 0px; padding: 0px; } table.contentpane td.componentheading { padding-left: 4px; } table.contentpaneopen fieldset { border: 0px; border-bottom: 1px solid #eee; } .button { color: #c64934; font-family: Arial, Hevlvetica, sans-serif; text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; width: auto; background: url(../images/button_bg.png) repeat-x; padding: 0px 5px; line-height: 18px !important; line-height: 16px; height: 26px !important; height: 24px; margin: 1px; } .inputbox { padding: 2px; border:solid 1px #cccccc; background-color: #ffffff; } .componentheading { background: url(../images/subhead_bg.png) repeat-x; color: #666666; text-align: left; padding-top: 4px; padding-left: 4px; height: 21px; font-weight: bold; font-size: 10px; text-transform: uppercase; } .contentcolumn { padding-right: 5px; } .contentheading { height: 30px; color: #c64934; font-weight: bold; font-size: 14px; white-space: nowrap; } .contentpagetitle { font-size: 13px; font-weight: bold; color: #cccccc; text-align:left; } table.searchinto { width: 100%; } table.searchintro td { font-weight: bold; } table.moduletable { width: 100%; margin-bottom: 5px; padding: 0px; border-spacing: 0px; border-collapse: collapse; } div.moduletable { padding: 0; margin-bottom: 2px; } table.moduletable th, div.moduletable h3 { background: url(../images/subhead_bg.png) repeat-x; color: #666666; text-align: left; padding-left: 4px; height: 21px; line-height: 21px; font-weight: bold; font-size: 10px; text-transform: uppercase; margin: 0 0 2px 0; } table.moduletable td { font-size: 11px; padding: 0px; margin: 0px; font-weight: normal; } table.pollstableborder td { padding: 2px; } .sectiontableheader { font-weight: bold; background: #f0f0f0; padding: 4px; } .sectiontablefooter { } .sectiontableentry1 { background-color : #ffffff; } .sectiontableentry2 { background-color : #f9f9f9; } .small { color: #999999; font-size: 11px; } .createdate { height: 15px; padding-bottom: 10px; color: #999999; font-size: 11px; } .modifydate { height: 15px; padding-top: 10px; color: #999999; font-size: 11px; } table.contenttoc { border: 1px solid #cccccc; padding: 2px; margin-left: 2px; margin-bottom: 2px; } table.contenttoc td { padding: 2px; } table.contenttoc th { background: url(../images/subhead_bg.png) repeat-x; color: #666666; text-align: left; padding-top: 2px; padding-left: 4px; height: 21px; font-weight: bold; font-size: 10px; text-transform: uppercase; } a.mainlevel:link, a.mainlevel:visited { display: block; background: url(../images/menu_bg.png) no-repeat; vertical-align: middle; font-size: 11px; font-weight: bold; color: #ccc; text-align: left; padding-top: 5px; padding-left: 18px; height: 20px !important; height: 25px; width: 100%; text-decoration: none; } a.mainlevel:hover { background-position: 0px -25px; text-decoration: none; color: #fff; } a.mainlevel#active_menu { color:#fff; font-weight: bold; } a.mainlevel#active_menu:hover { color: #fff; } a.sublevel:link, a.sublevel:visited { padding-left: 1px; vertical-align: middle; font-size: 11px; font-weight: bold; color: #c64934; text-align: left; } a.sublevel:hover { color: #900; text-decoration: none; } a.sublevel#active_menu { color: #333; } .highlight { background-color: Yellow; color: Blue; padding: 0; } .code { background-color: #ddd; border: 1px solid #bbb; } form { /* removes space below form elements */ margin: 0; padding: 0; } div.mosimage { border: 1px solid #ccc; } .mosimage { border: 1px solid #cccccc; margin: 5px } .mosimage_caption { margin-top: 2px; background: #efefef; padding: 1px 2px; color: #666; font-size: 10px; border-top: 1px solid #cccccc; } span.article_seperator { display: block; height: 1.5em; } Code (markup): My pruettfamilyhistory.com/enter/templates/rhuk_solarflare_ii/css/d_fynmenu.css is..... /* commented out lines for 800px width template */ #nav, #nav ul { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; float: left; list-style: none; font-weight: bold; padding: 0; margin: 0; } #nav a { display: block; color: #345469; text-decoration: none; padding: 0; line-height: 26px; /*Uncomment line below if not using images */ /*width: 132px; */ } #nav a.sub { width: 160px; background: #006633; } #nav li { float: left; padding: 5px; text-align:center; background: #FFFFFF; /*Uncomment line below if not using images */ /*border-right: 1px solid #ffffff;*/ } #nav li ul { position: absolute; left: -999em; height: auto; width: 170px; font-weight: normal; margin: 0; } #nav li li { background-color: #C8DFAF; list-style: none; text-align:left; width: 170px; } #nav li ul a { line-height: 26px; padding-left: 10px; } #nav li ul ul { margin: -26px 0 0 170px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li li:hover { background-color: #DED5BD; } #nav li:hover, #nav li.sfhover { } Code (markup):
My pruettfamilyhistory.com/enter/modules/fynmenu/d_fynmenu.css is..... #dropmenudiv{ position:absolute; border:0px solid black; border-bottom-width: 1; font:normal 12px Verdana; line-height:14px; z-index:100; } #dropmenudiv a{ width: 100%; display: block; text-indent: 3px; border-bottom: 0px solid black; padding: 3px 0; text-decoration: none; font-weight: normal; } #dropmenudiv a:hover{ /*hover background color*/ background-color: #DCD2B9; } .style1 { font-size: 12px; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; color: #345469; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic; } </style> <script type="text/javascript"> /*********************************************** * AnyLink Drop Down Menu- c Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //Contents for menu 2, and so on var menu2=new Array() menu2[0]='<a href="oral_history_of_carrol_joan.html" class="mainnav">Oral History of Carrol and Joan</a>' menu2[1]='<a href="submit_your_own.html" class="mainnav">Submit your own</a>' menu2[2]='<a href="read_others.html" class="mainnav">Read others</a>' //Contents for menu 3, and so on var menu3=new Array() menu3[0]='<a href="http://pruettfamilyhistory.com/enter/index.php?option=com_ponygallery&Itemid=&func=viewcategory&catid=1" class="mainnav">Pre-1950</a>' menu3[1]='<a href="http://pruettfamilyhistory.com/enter/index.php?option=com_ponygallery&Itemid=&func=viewcategory&catid=2" class="mainnav">1951-1960</a>' menu3[2]='<a href="http://pruettfamilyhistory.com/enter/index.php?option=com_ponygallery&Itemid=&func=viewcategory&catid=3" class="mainnav">1961-1970</a>' menu3[3]='<a href="http://pruettfamilyhistory.com/enter/index.php?option=com_ponygallery&Itemid=&func=viewcategory&catid=4" class="mainnav">1971-1980</a>' menu3[4]='<a href="http://pruettfamilyhistory.com/enter/index.php?option=com_ponygallery&Itemid=&func=viewcategory&catid=5" class="mainnav">1981-1990</a>' menu3[5]='<a href="http://pruettfamilyhistory.com/enter/index.php?option=com_ponygallery&Itemid=&func=viewcategory&catid=6" class="mainnav">1991-2000</a>' menu3[6]='<a href="http://pruettfamilyhistory.com/enter/index.php?option=com_ponygallery&Itemid=&func=viewcategory&catid=7" class="mainnav">2001-2007</a>' menu3[7]='<a href="http://pruettfamilyhistory.com/enter/index.php?option=com_ponygallery&Itemid=&func=viewcategory&catid=8" class="mainnav">2008</a>' //Contents for menu 4, and so on var menu4=new Array() menu4[0]='<a href="sentimental.html" class="mainnav">Sentimental</a>' menu4[1]='<a href="historical.html" class="mainnav">Historical</a>' //Contents for menu 5, and so on var menu5=new Array() menu5[0]='<a href="oral_history_of_carrol_joan.html" class="mainnav">Main Page</a>' menu5[1]='<a href="timelines.html" class="mainnav">Timelines</a>' menu5[2]='<a href="family_trees.html" class="mainnav">Family Trees</a>' menu5[3]='<a href="ask_a_question.html" class="mainnav">Ask a Question</a>' menu5[4]='<a href="link_to_family_forum.html" class="mainnav">Link to Family Forum</a>' //Contents for menu 6, and so on var menu6=new Array() menu6[0]='<a href="#" class="mainnav">Carrol</a>' menu6[1]='<a href="#" class="mainnav">Joan</a>' menu6[2]='<a href="#" class="mainnav">Stephen</a>' menu6[3]='<a href="#" class="mainnav">Jeremy</a>' menu6[4]='<a href="#" class="mainnav">Daniel</a>' var menuwidth='250px' //default menu width var menubgcolor='#C8DFAF' //menu bgcolor var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="yes" //hide menu when user clicks within menu? /////No further editing needed var ie4=document.all var ns6=document.getElementById&&!document.all if (ie4||ns6) document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, menuwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top="-500px" if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{ var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up? edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge } } return edgeoffset } function populatemenu(what){ if (ie4||ns6) dropmenuobj.innerHTML=what.join("") } function dropdownmenu(obj, e, menucontents, menuwidth){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() clearhidemenu() dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv populatemenu(menucontents) if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth) dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px" } return clickreturnvalue() } function clickreturnvalue(){ if (ie4||ns6) return false else return true } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } if (hidemenu_onclick=="yes") document.onclick=hidemenu <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="100" bgcolor="#FFFFFF"><div align="center"><a href="index.html" class="mainnav">Home</a></div></td> <td width="1" bgcolor="#FFFFFF"><div align="center"><img src="images/nav_hyphens.gif" width="1" height="25" /></div></td> <td width="100" bgcolor="#FFFFFF"><div align="center"><a href="stories.html" class="mainnav" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '250px')" onMouseout="delayhidemenu()">Stories</a> </div></td> <td width="1" bgcolor="#FFFFFF"><div align="center"><img src="images/nav_hyphens.gif" width="1" height="25" /></div></td> <td width="100" bgcolor="#FFFFFF"><div align="center"><a href="http://pruettfamilyhistory.com/enter/index.php?option=com_ponygallery&task=new" class="mainnav" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '200px')" onMouseout="delayhidemenu()">Photos</a> </div></td> <td width="1" bgcolor="#FFFFFF"><div align="center"><img src="images/nav_hyphens.gif" width="1" height="25" /></div></td> <td width="107" bgcolor="#FFFFFF"><div align="center"><a href="archives.html" class="mainnav" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '200px')" onMouseout="delayhidemenu()">Archives</a> </div></td> <td width="1" bgcolor="#FFFFFF"><div align="center"><img src="images/nav_hyphens.gif" width="1" height="25" /></div></td> <td width="120" bgcolor="#FFFFFF"><div align="center"><a href="genealogy.html" class="mainnav" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '200px')" onMouseout="delayhidemenu()">Genealogy</a> </div></td> <td width="1" bgcolor="#FFFFFF"><div align="center"><img src="images/nav_hyphens.gif" width="1" height="25" /></div></td> <td width="140" bgcolor="#FFFFFF"><div align="center"><a href="oral_histories.html" class="mainnav" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '200px')" onMouseout="delayhidemenu()">Oral Histories</a> </div></td> <td width="1" bgcolor="#FFFFFF"><div align="center"><img src="images/nav_hyphens.gif" width="1" height="25" /></div></td> <td width="127" bgcolor="#FFFFFF"><div align="center"><a href="http://pruettfamilyhistory.com/familytalk/" class="mainnav" target="_blank">Family Talk</a></div></td> </tr> </table> Code (markup):
hay man how are you?..it was i who develop you site.sorry to quite your site because of you know domain crash. we have misunderstand with my partner.hope you get to fix it.