Firefox 4.0 Windows 7 a site looks fine in Explorer but the menu and sub menu looks wrong with Firefox. Javascript is enabled. How to fix?
I made a website and it looks fine in Internet Explorer with the Windows 7 operating system. When viewing with Firefox the main menu and the sub menus look wrong and the sub menus are not useable because they appear on top of the main menu. How do I fix this?
Chosen solution
As a starting point, I recommend the most liberal DOCTYPE (which I listed above).
cor-el's post shows an edit to one of the scripts on your site so that the number of pixels is followed by the letters 'px' (Firefox requires units of measurement, in this case, pixels).
Read this answer in context 👍 1All Replies (7)
A couple thoughts.
First, your HTML does not have a DOCTYPE declaration at the top. As a result, Firefox will lay out the page using the rules of "Quirks" mode instead of a web standards mode. This can lead to more differences from IE and other browsers. To experiment with a DOCTYPE declaration, try this (from W3C QA - Recommended list of Doctype declarations you can use in your Web document):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Note: that could break your page in IE, so you probably should work on a copy of the page.
Second, you may want to check your menu script to make sure it was designed with compatibility for Firefox. If this is your own script, you can get more assistance on the mozillaZine Web Development board. Separate forum, separate registration. Please note the tips in the Sticky Post at the top of the forum before posting.
Thank you for your reply. I tried the DOCTYPE you posted above as well as several I found at W3C QA for recommended Doctype Declarations. At least five different suggested DOCTYPES worked with IE. None worked with Firefox. I am still trying to find something that will work. I got the script from a fellow online several years ago and modified it some when making the page. I use NOTEPAD to make the page. It always worked OK with IE until the latest version when the height needed to be slightly changed in the menu section. I never could get it to work correctly with Mozilla Firefox (any version).
Looks like you aren't adding a px unit to the top and left values for the ns6 part for Firefox
function a4(c8){
var tmi=c8; c2[c3[c8].d4].b5=c8;
if(c3[c8].sub != 0){
if(ns6){
mnn=document.getElementById('vrsub'+c3[c3[c8].sub].c4);
mnp=document.getElementById('vrsub'+c3[c8].c4);
mnn.style.top=mnp.offsetTop+(c3[c8].c9*c3[c8].d1)+c2[c3[c8].d4].b3+'px';
mnn.style.left=mnp.offsetLeft+c3[c8].d2+c3[c8].a9-c2[c3[c8].d4].b2+'px';
mnn.style.visibility="visible";
}
};
};
Modified by cor-el
Thank you for your reply. I am really very new to this and trying to learn.
Where exactly does the above info get inserted?
Don't I still need to show a DOCTYPE and which one?
Sorry to be such a bother. I'm just trying to figure out how to fix so the site is correctly shown with IE and Firefox.
Chosen Solution
As a starting point, I recommend the most liberal DOCTYPE (which I listed above).
cor-el's post shows an edit to one of the scripts on your site so that the number of pixels is followed by the letters 'px' (Firefox requires units of measurement, in this case, pixels).
The CSS menu works for me with the modified function a4 that I posted above.
You can find the code in this file:
Search for function a4 and then find the if(ns6) section.
Many thanks to Jscher2000 and Cor-el for your very helpful info. I modified the menu.js as suggested and added the DOCTYPE suggested. I also changed a few other things as I still had a slight problem viewing the main menu in Firefox. All seems well now. Thank you for your very welcome and much needed assist.
Modified by FriscoBill