Jump to content

CSS Based Web Navigation HELP !


DanSmith82

Recommended Posts

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

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

  • 2 weeks later...

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...