DanSmith82 Posted December 12, 2005 Share Posted December 12, 2005 Hi All, I would greatly appreciate it if you could have a quick look at the following script on page :http://www.mfmf.org.uk/testnav.htmThis is a charity based website.I am having a few issues with some browsers by way of the text sizing and drop down visibility.I want the text size to be fixed on the page so it doesnt diserb the look and feel for the whole site. For some reason the text size in the drop down list becomes very big in some peoples browsers but not others, Why is this ? Also there apears to be a slight break in the link when you scroll from the top nav link into the drop down list how can I fix this ? Can you please have a look at my script and advise on any improvements ?Thanks Link to comment Share on other sites More sharing options...
S@m Posted December 12, 2005 Share Posted December 12, 2005 Try using %'s instead of actual pt value for your fonts. I'm not sure what normal 10-12pt converts to percent wise, you will have to play with the settings. Link to comment Share on other sites More sharing options...
aspnetguy Posted December 12, 2005 Share Posted December 12, 2005 Sometimes IE and FF render widths differently.you could do thiswidth: 100px /*FF and default*/-width: 98px /*IE hack...IE will read '-' but other browsers ignore whole line.in this way you can set a default value and then adjust it for IE.You can use this method with any CSS attribute. Link to comment Share on other sites More sharing options...
aspnetguy Posted December 22, 2005 Share Posted December 22, 2005 I think your problem is that you built the nav bar in <ul><li> tags...this for bulleted lists not menus.If you change this I think this will solve the problem. Different browsers put different margins around <ul>a and <li> tags.instead of <ul><li><a href="">some link</a></li><li><a href="">some link</a></li><li><a href="">some link</a></li><li><a href="">some link</a></li></ul> just do this <a href="">some link</a><br><a href="">some link</a><br><a href="">some link</a><br><a href="">some link</a><br><a href="">some link</a> or for horizontal rows just <a href="">some link</a><a href="">some link</a><a href="">some link</a><a href="">some link</a> Link to comment Share on other sites More sharing options...
DanSmith82 Posted December 22, 2005 Author Share Posted December 22, 2005 By doing this wont it actully render my menu bar useless as the MainItems and List items have been defined in these tags ? so if you take this away the drop downs wont work and my fixed defined styles wont be applied, ?Code if as follows :<!-- **************** NAVIGATION START ******************* --> <table width="680"> <tr> <td height="5" bgcolor="#D9AED9"></td> </tr> <tr> <td height="1"></td> </tr> <tr> <td bgcolor="#D9AED9" height="20"> <ul id="csstopmenu"><li class="mainitems"><div class="headerlinks"><a href="http://www.mfmf.org.uk/Index.htm"><span style="text-decoration: none" id="id6" onmouseover="FP_changeProp(/*id*/'id6',0,'style.color','#929D94');" onmouseout="FP_changeProp(/*id*/'id6',0,'style.color','#FFFFFF')">Home</span></a></div></li><div class="headerlinks"><a href="http://www.mfmf.org.uk/Personal.htm"><span style="text-decoration: none" id="id7" onmouseover="FP_changeProp(/*id*/'id7',0,'style.color','#929D94');" onmouseout="FP_changeProp(/*id*/'id7',0,'style.color','#FFFFFF')">Personal</span></a></div><a href="http://www.mfmf.org.uk/Personal.htm">Martin Finch</a><a href="http://www.mfmf.org.uk/Award.htm">Leadership Award</a><a href="http://www.mfmf.org.uk/Achievements.htm">Achievements</a><li class="mainitems"><div class="headerlinks"><a href="http://www.mfmf.org.uk/Events.htm"><span style="text-decoration: none" id="id8" onmouseover="FP_changeProp(/*id*/'id8',0,'style.color','#929D94');" onmouseout="FP_changeProp(/*id*/'id8',0,'style.color','#FFFFFF')">Events</span></a></div><div style="border-width: 0px"><ul class="submenus" style="width: 12em; "><li><a href="">Fundraising</a></li><li><a href="http://www.mfmf.org.uk/Events.htm">Events</a></li><li><a href="http://www.mfmf.org.uk/Events/GalaBall02.htm"> GalaBall 2002</a></li><li><a href="http://www.mfmf.org.uk/Events/GalaBall03.htm"> GalaBall 2003</a></li><li><a href="http://www.mfmf.org.uk/Events/GalaBall04.htm"> GalaBall 2004</a></li><li><a href="http://www.mfmf.org.uk/Events/GalaBall05/GalaBall05.htm"> GalaBall 2005</a></li><li><a href="http://www.mfmf.org.uk/Events/Walk03.htm"> Spencer D Walk 2003</a></li><li><a href="http://www.mfmf.org.uk/Events/Walk04.htm"> Spencer D Walk 2004</a></li><li><a href="http://www.mfmf.org.uk/Events/Caribbean.htm"> Caribbean Nights 2003</a></li><li><a href="http://www.mfmf.org.uk/Events/L-Plate.htm"> L Plate Challenge 2004</a></li><li><a href="http://www.mfmf.org.uk/Events/M4Mconcert.htm"> M4M Concert</a></li><li><a href="http://www.mfmf.org.uk/Events/Skydive.htm"> MR Skydive 2003</a></li><li><a href="http://www.mfmf.org.uk/Events/Space.htm"> Space 2004</a></li><li><a href="http://www.mfmf.org.uk/Events/WildWest/WildWest.htm"> Wild West 2005</a></li><li><a href="http://www.mfmf.org.uk/Acknowledgements.htm">Acknowledgements</a></li></ul></div></li><li class="mainitems"><div class="headerlinks"><a href="http://www.mfmf.org.uk/Meningitis.htm"><span style="text-decoration: none" id="id9" onmouseover="FP_changeProp(/*id*/'id9',0,'style.color','#929D94');" onmouseout="FP_changeProp(/*id*/'id9',0,'style.color','#FFFFFF')">Meningitis</span></a></div><ul class="submenus" style="width: 10em; "><li><a href="http://www.mfmf.org.uk/Meningitis.htm">The Symptoms</a></li><li><a href="http://www.meningitisuk.org" target="_blank">Spencer Dayman</a></li><li><a href="http://www.meningitis.org.uk" target="_blank">Meningitis Research</a></li><li><a href="http://www.meningitis-trust.org" target="_blank">Meningitis Trust</a></li><li><a href="">NHS</a></li></ul></li><li class="mainitems"><div class="headerlinks"><a href="http://www.mfmf.org.uk/Form/Enquiries.htm"><span style="text-decoration: none" id="id10" onmouseover="FP_changeProp(/*id*/'id10',0,'style.color','#929D94');" onmouseout="FP_changeProp(/*id*/'id10',0,'style.color','#FFFFFF')">Contact Us</span></a></div></li></ul><div id="clearmenu" style="clear: left"></div> <!-- **************** NAVIGATION END ******************* -->and the Java script in the Head section is : <script type="text/javascript">startMenu = function() {if (document.all&&document.getElementById) {cssmenu = document.getElementById("csstopmenu");for (i=0; i<cssmenu.childNodes.length; i++) {node = cssmenu.childNodes;if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";}node.onmouseout=function(){ this.className=this.className.replace(" over", "")}}}}}if (window.attachEvent)window.attachEvent("onload", startMenu)elsewindow.onload=startMenu;function FP_setStatusBarText(txt) {//v1.0 window.status=txt;}function FP_changeProp() {//v1.0 var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x; d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o"; ao=args.split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) { s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array(); x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x; if(s) eval(s+"=v"); }}function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if© for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null;}function FP_changePropRestore() {//v1.0 var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe; if(x.v=="") x.v=""; eval("x."+x.n+"=x.v"); } d.$cpe=null; }}</script>Is there a way was delaying the dropmenu from dissapearing straight away in the java script so that the gap wont matter ?Thanks for your help ! Dan Link to comment Share on other sites More sharing options...
F-Man Posted December 23, 2005 Share Posted December 23, 2005 I think your problem is that you built the nav bar in <ul><li> tags...this for bulleted lists not menus.Very wrong.Link: Unordered lists: more than just bulletsLists can easily be styled to look anyway you want them. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now