hey guys... why is the drop down menu under Products different in each browser? it's like there's no line break in the drop down in IE...looks perfect in FF. what am i doing wrong? healingwatermachines.com
I think different browser is different design, no all browser surport same things.So you should find some commen things to fit different browser.
not quite the answer i was looking for...i already know that....a simple 1pix gif can fix wonders between browsers but this is a bit deeper being that it involves php and css. can someone please suggest or advise?
How about letting us peep it? No way to answer your question if we can't see it. I'll admit, while there are all kinds of compatibility issues between browsers, I've never see an issue on a drop down select. Also, it would do you well to always mention which VERSIONS of browsers. I mean, things can look significantly differenet in IE6 v. IE7 and FF2 v. FF3
Thanks Sean... well it's IE6 it's healingwatermachines.com here's the script in the index.php file...it's pretty long but it's menu1. <script type="text/javascript"> var menu1=new Array() menu1[0]='<a href="/products/compare_water_ionizers_and_water_filter_models.php" class="biggerdarkermaintext">Ionizers</a>' menu1[1]='<a href="/products/whole_house_water_filter_and_softener_system_salt_free_water_softener.php#WholeHouseWaterFilter" class="biggerdarkermaintext">Whole House Water Filters</a>' menu1[2]='<a href="/products/whole_house_water_filter_and_softener_system_salt_free_water_softener.php" class="biggerdarkermaintext">Salt Free Water Softners</a>' menu1[3]='<a href="/products/health_products.php" class="biggerdarkermaintext">Health Products</a>' menu1[4]='<a href="/products/water_testing_supplies.php" class="biggerdarkermaintext">Water Testing Supplies</a>' menu1[5]='<a href="/products/accessories.php" class="biggerdarkermaintext">Accessories</a>' menu1[6]='<a href="/products/shower_and_bath_filters.php" class="biggerdarkermaintext">Shower and Bath Filters</a>' menu1[7]='<a href="/products/drinking_water_pre_filters.php" class="biggerdarkermaintext">Pre-Filters</a>' menu1[8]='<a href="/products/jupiter_biostone_replacement_fiters.php" class="biggerdarkermaintext">Replacement Filters</a>' menu1[9]='<a href="" class="biggerdarkermaintext">Reverse Osmosis Water Filters</a>' var menu2=new Array() menu2[0]='<a href="/information/doctor_testimonials_about_ionized_water.php" class="biggerdarkermaintext">Doctor Testimonials</a>' menu2[1]='<a href="/information/customer_raves.php" class="biggerdarkermaintext">Customer Satisfaction</a>' menu2[2]='<a href="/articles/how_ionized_water_changed_my_life.php" class="biggerdarkermaintext">Ionized Water Changed My Life</a>' menu2[3]='<a href="/articles/chronic_progressive_ms.php" class="biggerdarkermaintext">Chronic Progressive MS</a>' menu2[4]='<a href="/articles/chronic_eczema.php" class="biggerdarkermaintext">Chronic Eczema</a>' menu2[5]='<a href="/articles/chronic_fatigue_syndrome.php" class="biggerdarkermaintext">Chronic fatigue Syndrome</a>' menu2[6]='<a href="/information/water_is_working.php" class="biggerdarkermaintext">The water is Working</a>' menu2[7]='<a href="/information/testimonials.php" class="biggerdarkermaintext">Customer Results</a>' var menu3=new Array() menu3[0]='<a href="/affiliate/affiliates.php" class="biggerdarkermaintext">Affiliate Information</a>' menu3[1]='<a href="/affiliate/affiliates.php" class="biggerdarkermaintext">Affiliate Login</a>' var menu4=new Array() menu4[0]='<a href="/information/prefilter_recommendation.php" class="biggerdarkermaintext">Pre-filter Recomendations</a>' var menuwidth='950px' //default menu width var menubgcolor='#FFFFFF' //menu bgcolor var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="no" //hide menu when user clicks within menu? 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 </script>
Thanks, @ LiveingWaters3, that helps. Now I see that your problem is much larger: This is ONLY displaying well in FF 2 and 3; I see serious issues in IE 6 & 7 and issues in Safari 3, and Google Chrome. That's pretty bad. You won't like this, but what I'd recommend is that you don't use JavaScript ( and don't go looking at DHTML ), but revise your drop down navigation/fly-out menu to use nested XHTML unordered lists and CSS. PS: I misread earlier about drop down selects; I now see that the issue is with drop down navigation/fly-out menu. What's worse is that it really goes to crap in all browsers when clicking on the top level navigation options, and worse than that, as you are leaning on JavaScript here, there are not more navigaion options for folks who ( crazy as they may be ) have JS disabled in their browser of choice -- so, you've cut them off ( as well as search engine spiders ) from getting into these pages. Frankly, at this point I'd have to say that you really need to trash this and redo the whole thing using XHTML UL's and CSS. I'm sure that will set you back a bit wondering where to start. I don't have an example at my finger tips at the moment, but if you can't get a start on it, reply back and I'll dig something up ( I rarely use top navigation drop downs/fly-outs -- I tend to do this with left nav ).
Sean...i was afraid of that might be a few days...have to discuss with owner of the site...i'll PM you ok? i appreciate the help...i didn't build this site and looking at the code..it was a MESS. anyways...let me notify her of this and i'll come back in here soon and i'll PM you... i've never worked with the drop down script you mentioned but i'm sure i can incorporate an .asp drop down or menumachine or dhtml right?
Yeah, I can relate. We have a lot of refugees and folks we're inherited "legacy" sites from. Not easy to clean up somebody else's half-baked coding to be sure. My sympathies are with you. RE: No, no, not that at all. It obviously can't be .asp, as that would be server side, and stay away form DHTML, as these days there's really no need to go there. What you want is to mark this up with XHTML as a simple nested unordered list, and then use CSS to style it and control the hover ( "mouseover" ) events. <ul> <li></li> <ul> <li></li> </ul> </ul> Code (markup): I'll have to get back to you on the CSS as I'm trying to just jam through some posts right now, but essentially, you'll need to style the li's inline and style the hover events on the nested ul's. Don't be afraid to spend some time learning the basics like this before crying "uncle"