Site not appearing properly in Mozilla Firefox

[rsteph]

I've got a site that appears properly in both IE and Netscape for has all sorts of appearance issues in Mozilla Firefox. I've looked around for some points on the web that help explain the issue, but have so far found nothing. I've come to the conclussion that the problem has to be a CSS one.

Here's the site address. It's currently being hosted on Tripod, until we get some of the bugs worked out and put it on the final hosting site:

http://rsteph49.tripod.com/default.shtml

Here's the style sheet currently being used:


/* css style sheet */

body {
margin: 10px 10px 0px 10px;
padding: 0px;
}

/* ================================================== =================== */
/* Specific DIVs */
#bannercontent {
position: absolute;
left: 190px;
top: 10px;
height: 226px;
width: 900px;
voice-family: "\"}\"";
voice-family: inherit;
z-index: 1;
}
html>body #bannercontent {
height: 200px;
}

#menucontent {
position: absolute;
left: 190px;
top: 236px;
width: 900px;
height: 30px;
background-image: URL(images/menu04.png);
z-index: 3;
}

#bodycontent {
position: absolute;
left: 190px;
top: 266px;
height: 1000px;
width: 900px;
voice-family: "\"}\"";
voice-family: inherit;
background-image: URL(images/marb009.jpg);
z-index: 1;
}
html>body #bodycontent {
height: 800px;
}

#footer {
position: absolute;
left: 190px;
top: 1266px;
height: 40px;
width: 900px;
voice-family: "\"}\""
voice-family: inherit;
background-image: URL(images/menu04.png);
z-index: 1;
}
html>body #footer {
height: 40px;
}

#groupItem {
height: 80px;
border: 1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height: 80px;
width: 800px;
z-index: 2;
}
html>body #footer {
height: 80px;
}

#datetime {
font-family: arial;
font-size: 14pt;
font-weight: 900;
color: #ffffff;
z-index: 3;
}

/* ================================================== =================== */
/* Font Elements */

#bannercontent h1 {
font-size: 58px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#bodycontent h1 {
font-size: 36px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#bodycontent p {
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#bodycontent h5 {
font-weight: bold;
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#bodycontent li {
font-size: 18px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#menucontent h1 {
font-size: 36px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#menucontent p {
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

#footer p {
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

p {
font-size: 16px;
padding: 10px 10px 0px 10px;
margin: 0px;
color: #000000;
}

a:link {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}

a:visited {
font-weight: bold;
text-decoration: none;
color: #7AD0E1;
}

a:hover, a:active {
text-decoration: underline;
color: #1365AE;
}

/* ================================================== =================== */
/* Random style classes. */

.clCMEvent{position:absolute; z-index:300; width:100%; height:100%; clip:rect(0,100%,100%,0); left:0; top:0; visibility:hidden}
.clCMAbs{position:absolute; width:10; height:10; left:0; top:0; visibility:hidden}

.clT,.clTover,.clS,.clSover,.clS2,.clS2over{positi on:absolute; overflow:hidden; width:130; height:30; cursor:hand}
.clT,.clTover{padding:2px; font-size:16px; font-weight:bold}
.clT{color:white; }

.clTover{color:#7AD0E1;}

.clS,.clSover{padding:2px; font-size:16px; font-weight:bold}

.clS2,.clS2over{padding:2px; font-size:16px;}

/* .clS,.clS2{color:white; background-color:#6699CC; layer-background-color:#6699CC;} */
.clS,.clS2{color:white; background-color:#3B3B65; layer-background-color:#3B3B65;}

.clSover,.clS2over{color:#7AD0E1;}

/* .clSover,.clS2over,.clTover,.clB,.clBar{layer-background-color:#0066CC; background-color:#0066CC;} */
.clSover, .clS2over{layer-background-color:#1365AE; background-color:#1365AE;}

.clB{position:absolute; visibility:hidden; z-index:300}
.clBar{position:absolute; width:10; height:30; visibility:hidden; }

/* ================================================== =================== */

Any help for what I have to do to make the site appear properly in all three (IE, Netscape, Firefox) would be greatly appreciated.

[drhowarddrfine]

Your doctype is incorrect and IE is in quirks mode. Capitalization matters:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[rsteph]

I made that change, but it didn't have any effect on the menubar. I noticed when looking at the javascript for the menubar, I have the barClass set as clBar, which in the .css has a postition of absolute. Could that be part of the problem? And if so, is there a way for me to change this, only when viewing in Firefox (so there's no risk of messing things up when viewing in IE/Netscape?

Thanks for your help.

Your doctype is incorrect and IE is in quirks mode. Capitalization matters:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[drhowarddrfine]

You are using invalid Xhtml. In xhtml, tags must be in lower-case because xml is case sensitive. Also, many tags end with />; with the slash. Validate and fix those 50 errors before we get into javascript problems. You have to have your html correct before anything else.

[rsteph]

Ok, I've gone through the homepage and removed every caps tag and/or attribute or attribute value that I can find on the homepage, header, footer, and the stylesheet. I haven't gone through the javascript yet. but I will go through that next. As time permits all go through the rest of the pages and change them as well. I'm focusing on the homepage at the moment though, till I can get it appearing properly.

[AricC]

A few things to consider, more than 85% of the world uses IE. Consider chopping 100px off the width there are still some 800x600 users out there. You are using a strict doctype you should probably use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[rsteph]

Thank you for your comments.

I've thought about the issue of the screen size. It's something we are looking into refitting the site for; My first focus was on fixing the menu bar, then resizing things to fit more screens.

I've altered the <!DOCTYPE> tag but I'm still getting the same issue. The menu bar appears at the top left of the screen, and scrolls down with the screen; in Firefox. It's still working perfectly correct in IE. Usually I wouldn't be as concerned about this glitch (as like you said most people use IE or Netscape), but the individuals giving me direction on the content/appearance of the site all just so happen to use Firefox.

[AricC]

Try another menu to see if that fixes the problem:

Drop Down Menu


Your javascript could be geared toward IE which will make the site look horrendous in FF. Just cut and paste that sample above see if it works then you'll know its the javascript of your current menu.

[drhowarddrfine]

A few things to consider, more than 85% of the world uses IE.

Which means absolutely nothing.

You are using a strict doctype you should probably use this one:

Absolutely false! ALL new pages should ALWAYS use a strict doctype!

Your page will never look correct until you fix your errors.

[rsteph]

Well I did a quick and dirty implement of the drop down menu AricC posted a link to.

I didn't get it appearing right in the page, but it did get put in the right spot, and didn't scroll down with the page in both IE and Firefox (I don't have Netscape to check that). Which leads me to believe that the error I'm having is somewhere within the javascript.

Would it be better for me to post the code to that here (as it's likely some combination with how the java script access the CSS classes; or would it be better to show the code in the javascript forum, with a link to this thread so they can see the .css?

I've mucked around in my script some, but I can't see anything, that I haven't already tried, that's obviously wrong. I tried changing a few of the classes, and found it would have an effect on the menu, but wouldn't stop it from scrolling, or put it in the right spot. So I'm still at a bit of a loss.

[drhowarddrfine]

Try it here first, then go there.
The problem with Tripod, and other free web sites, is their advertising stuff tends to interfere with proper web pages. Did you fix your html errors?

[rsteph]

I believe I got all the html errors. Everything is lower case, and I have the strict <!DOCTYPE> in place.

Here's the code, there's 2 files; the second files has the custom functions/methods (i.e. cm_makeLevel, makeMenu, ect.)

If you guys can figure this out, I'll be in your debt. Cause I'm at a loss.

file1:
================================================== ===
//size of the page
var tsize="(cmpage.x2-160)";

oM=new makeCM("oM");
oM.resizeCheck=1;
oM.rows=1;
oM.onlineRoot="/";
oM.pxBetween=5;
oM.fillImg="images/cm_fill.gif";
oM.fromTop=0;
oM.fromLeft=0;
oM.wait=300;
oM.menuPlacement=0;
//Background bar properties
oM.useBar=1;
oM.barWidth=tsize;
oM.barHeight="menu";
oM.barX=150;
oM.barY="menu";
oM.barClass="clBar";
oM.barBorderX=0;
oM.barBorderY=0;

//Create Menu Levels
oM.level[0]=new cm_makeLevel(140,30,"clT","clTover",1,1,"clB",0,"b ottom",0,0,0,0,0);
oM.level[1]=new cm_makeLevel(140,30,"clS","clSover",1,1,"clB",0,"r ight",0,0,"images/menu_arrow.gif",10,10);
oM.level[2]=new cm_makeLevel(150,30,"clS2","clS2over");
oM.level[3]=new cm_makeLevel(165,30);

oM.makeMenu('m1','','Home','default.shtml');
oM.makeMenu('m2','','Ministries','');
oM.makeMenu('m3','','Calendar','calendar.shtml');
oM.makeMenu('m4','','About','about.shtml');
oM.makeMenu('m5','','Contact Us','contact.shtml');
oM.makeMenu('m6','','Resources','');


//Ministries Menu
oM.makeMenu('m21','m2','Worship');
oM.makeMenu('m211','m21','Choir','choir.shtml');
oM.makeMenu('m22','m2','Fellowship','fellowship.sh tml');
oM.makeMenu('m23','m2','Outreach','outreach.shtml' );
oM.makeMenu('m24','m2','Discipleship');
oM.makeMenu('m241','m24','Small Groups','smallGroup.shtml');
oM.makeMenu('m242','m24','Sunday School','sunSchool.shtml');
oM.makeMenu('m25','m2','Care','care.shtml');
oM.makeMenu('m26','m2','Youth/Children');
oM.makeMenu('m261','m26','Middle/High School','youth.shtml');
oM.makeMenu('m262','m26','Preschool/Children','children.shtml');

//Resources Menu
oM.makeMenu('m61','m6','Message Board','message.shtml');
oM.makeMenu('m62','m6','Links','links.shtml');


var avail="0+((cmpage.x2-205)/6)";
oM.menuPlacement=new Array(0,avail+"-20",avail+"*2-20",avail+"*3-20",avail+"*4-20",avail+"*5-20")
oM.construct()

[rsteph]

And the second file.

file2:
================================================== ===
if(bw.dom&&!bw.op){
makeCM.prototype.sel=0
makeCM.prototype.onshow+=";this.hideselectboxes(pm ,pm.subx,pm.suby,maxw,maxh,pm.lev)"
makeCM.prototype.hideselectboxes=function(pm,x,y,w ,h,l){
var selx,sely,selw,selh,i
if(!this.sel){
this.sel=this.doc.getElementsByTagName("SELECT")
this.sel.level=0
}
var sel=this.sel
for(i=0;i<sel.length;i++){
selx=0; sely=0; var selp;
if(sel[i].offsetParent){selp=sel[i]; while(selp.offsetParent){selp=selp.offsetParent; selx+=selp.offsetLeft; sely+=selp.offsetTop;}}
selx+=sel[i].offsetLeft; sely+=sel[i].offsetTop
selw=sel[i].offsetWidth; selh=sel[i].offsetHeight
if(selx+selw>x && selx<x+w && sely+selh>y && sely<y+h){
if(sel[i].style.visibility!="hidden"){sel[i].level=l; sel[i].style.visibility="hidden"; if(pm){ if(!pm.mout) pm.mout=""; pm.mout+=this.name+".sel["+i+"].style.visibility='visible';"}}
}else if(l<=sel[i].level && !(pm&&l==0)) sel[i].style.visibility="visible"
}
}
}

if(bw.ie) makeCM.prototype.onconstruct='document.body.onscro ll=new Function(c.name+".checkscrolled("+c.name+")")'
else makeCM.prototype.onconstruct='setTimeout(c.name+". checkscrolled()",200)' //REMOVE THIS LINE TO HAVE SCROLLING ON FOR EXPLORER ONLY!!
makeCM.prototype.lscroll=0
makeCM.prototype.scrollstop=0 //Set this variable to 1 for another scrolling effect. Leave at 0 to scroll regular
makeCM.prototype.checkscrolled=function(obj){
var i;
if(bw.mac) return //REMOVE THIS LINE TO HAVE SCROLLING ON THE MAC AS WELL - unstable!
var c=bw.ie?obj:this, o
if(bw.ns4 || bw.ns6 || bw.op5) c.scrollY=window.pageYOffset
else c.scrollY=document.body.scrollTop
if(c.scrollY!=c.lscroll){
c.hidesub()
if(c.scrollY>c.fromTop&&c.scrollstop){
for(i=0;i<c.l[0].m.length;i++){o=c.m[c.l[0].m[i]].b; o.moveIt(o.x,c.scrollY)}
if(c.useBar) c.bar.moveIt(c.bar.x,c.scrollY)
}else{
if(c.scrollstop){
for(i=0;i<c.l[0].m.length;i++){o=c.m[c.l[0].m[i]].b; o.moveIt(o.x,c.fromTop)}
if(c.useBar) c.bar.moveIt(c.bar.x,c.barY)
}else{
for(i=0;i<c.l[0].m.length;i++){o=c.m[c.l[0].m[i]].b; o.moveIt(o.x,o.oy+c.scrollY)}
if(c.useBar) c.bar.moveIt(c.bar.x,c.barY+c.scrollY)
}
}
c.lscroll=c.scrollY; cmpage.y=c.scrollY; cmpage.y2=cmpage.orgy+c.scrollY
if(bw.ie){ clearTimeout(c.tim); c.isover=0; c.hidesub()}
if(c.hideselectboxes){ //If you are using the hideselect add-in as well the script will now check for selectboxes when scrolling as well
var x = c.useBar?c.m[c.l[0].m[0]].b.x>c.bar.x?c.bar.x:c.m[c.l[0].m[0]].b.x:c.m[c.l[0].m[0]].b.x;
var y = c.useBar?c.m[c.l[0].m[0]].b.y>c.bar.y?c.bar.y:c.m[c.l[0].m[0]].b.y:c.m[c.l[0].m[0]].b.y;
var maxw = c.useBar?c.bar.w:c.rows?c.totw:c.maxw; var maxh = c.useBar?c.bar.h:!c.rows?c.toth:c.maxh
c.hideselectboxes(0,x,y,maxw,maxh,0)
}
}
if(!bw.ie) setTimeout(c.name+".checkscrolled()",200)
}
/******************************************
CM_ADD-IN - pagecheck (last updated: 08/02/02)

Simple code that *tries* to keep the menus inside the
bounderies of the page.

Code updated. It's still not perfect (obviosly)
but it will now do another check to try and place
the menus inside.


Just add this code to the coolmenus js file
or link the cm_addins.js file to your page.
*****************************************/
makeCM.prototype.onshow+=";this.pagecheck(b,pm,pm. subx,pm.suby,maxw,maxh)"
makeCM.prototype.pagecheck=function(b,pm,x,y,w,h,n ){
var l=pm.lev+1,a=b.align; if(!n) n=1
var ok=1
if(x<cmpage.x) {pm.align=1; ok=0;}
else if(x+w>cmpage.x2){ pm.align=2; ok=0;}
else if(y<cmpage.y) { pm.align=3; ok=0;}
else if(h+y>cmpage.y2) {pm.align=4; ok=0;}
if(!ok) this.getcoords(pm,this.l[l-1].borderX,this.l[l-1].borderY,pm.b.x,pm.b.y,w,h,this.l[l-1].offsetX,this.l[l-1].offsetY)
x=pm.subx; y=pm.suby
//Added check --- still not ok? --- part of the code by Denny Caldwell (thanks) -- badly immplemented by me though
if(x<cmpage.x) {x += cmpage.x-x;}
else if(x+w>cmpage.x2){ x = -(x+w-cmpage.x2);}
else if(y<cmpage.y) { y = cmpage.y-y; }
else if(h+y>cmpage.y2) {y = -(y+h-cmpage.y2);}
if(x<cmpage.x) {x += cmpage.x-x;}
else if(x+w>cmpage.x2){ x = -(x+w-cmpage.x2);}
else if(y<cmpage.y) { y = cmpage.y-y;}
else if(h+y>cmpage.y2) {y = -(y+h-cmpage.y2);}
b.moveIt(x,y)
}
/******************************************
CM_ADD-IN - pagecheck (last updated: 01/26/02)
Simple code that *tries* to keep the menus inside thebounderies of
the page.A more advanced version of this code will come later.
Just add this code to the coolmenus js fileor link the cm_addins.
js file to your page as well.
*****************************************/
//makeCM.prototype.onshow+=";this.pagecheck2(b,pm,x, y,maxw,maxh)"
makeCM.prototype.pagecheck2=function(b,pm,x,y,w,h) {
var fixX = 0
var fixY = 0
var ok=1
if(x+w>cmpage.x2) {
;
ok=0;
}else if(x<cmpage.x) {
ok=0;
}if(y+h>cmpage.y2){
fixY = -(y+h-cmpage.y2);
ok=0;
}else if(y<cmpage.y) {
fixY = cmpage.y-y;
ok=0;
}// self.status="x:"+x+" y:" +y+ " fixX:" +fixX+ " fixY:" +fixY
if(!ok) {
self.status = x + " - " +cmpage.x + " - " + fixX + " - " + (x+fixX)
x+=fixX;
y+=fixY
pm.moveIt(x,y)
self.status = b.css.left
}
}

/******************
CM_ADD-IN - filterIt (last updated: 01/26/02)

Explorer5.5+ only. Other browser will ignore it.

This function uses filters for Explorer to show
the subitems.
If you use this add-in you will get 1 new
level property called "filter". You have
to specify which filter to use and what
level to use them on.
(this properties will also be inherited though)

Example setting:
oCMenu.level[3].filter="progid:DXImageTransform.Microsoft.Fade(du ration=0.5)"

Examples on how to use this will come later.

Just add this code to the coolmenus js file
or link the cm_addins.js file to your page as well.
*****************/
bw.filter=(bw.ie55||bw.ie6) && !bw.mac
makeCM.prototype.onshow+=";if(c.l[pm.lev].filter) b.filterIt(c.l[pm.lev].filter)"
cm_makeLevel.prototype.filter=null
cm_makeObj.prototype.filterIt=function(f){
if(bw.filter){
if(this.evnt.filters[0]) this.evnt.filters[0].Stop();
else this.css.filter=f;
this.evnt.filters[0].Apply();
this.showIt();
this.evnt.filters[0].Play();
}
}
/******************
CM_ADD-IN - slide (last updated: 01/26/02)

This works in all browsers, but it can be
unstable on all other browsers then Explorer.

This function shows the submenus in a sliding
effect. If you use this add-in you get two
new level properties called "slidepx" and
"slidetim". You have to specify this for
the levels you want this to happen on
(these properties will also be inherited though)

slidepx is the number of pixels you want the
div to slide each setTimout, while "slidetim"
is the setTimeout speed (in milliseconds)

Example setting:
oCMenu.level[3].slidepx=10
oCMenu.level[3].slidetim=20

Just add this code to the coolmenus js file
or link the cm_addins.js file to your page as well.
*****************/
makeCM.prototype.onshow+="; if(c.l[pm.lev].slidepx){b.moveIt(x,b.y-b.h); b.showIt(); b.tim=null; b.slide(y,c.l[pm.lev].slidepx,c.l[pm.lev].slidetim,c,pm.lev,pm.name)}"
makeCM.prototype.going=0
cm_makeObj.prototype.tim=10;
cm_makeLevel.prototype.slidepx=null
cm_makeLevel.prototype.slidetim=30
cm_makeObj.prototype.slide=function(end,px,tim,c,l ,name){
if(!this.vis || c.l[l].a!=name) return
if(this.y<end-px){
if(this.y>(end-px*px-px) && px>1) px-=px/5; this.moveIt(this.x,this.y+px)
this.clipTo(end-this.y,this.w,this.h,0)
this.tim=setTimeout(this.obj+".slide("+end+","+px+ ","+tim+","+c.name+","+l+",'"+name+"')",tim)
}else{this.moveIt(this.x,end)}
}
/******************
CM_ADD-IN - clipout (last updated: 01/26/02)

This works in all browsers, but it can be
unstable on all other browsers then Explorer.

This function shows the submenus with a clipping
effect. If you use this add-in you get two
new level properties called "clippx" and
"cliptim". You have to specify this for
the levels you want this to happen on
(these properties will also be inherited though)

"clippx" is the number of pixels you want the
div to slide each setTimout, while "cliptim"
is the setTimeout speed (in milliseconds)

Example setting:
oCMenu.level[3].clippx=10
oCMenu.level[3].cliptim=20

Just add this code to the coolmenus js file
or link the cm_addins.js file to your page as well.

*****************/
makeCM.prototype.onshow+="if(c.l[pm.lev].clippx){h=b.h; if(!rows) b.clipTo(0,maxw,0,0,1); else b.clipTo(0,0,maxh,0,1); b.clipxy=0; b.showIt(); clearTimeout(b.tim); b.clipout(c.l[pm.lev].clippx,!rows?maxw:maxh,!rows?maxh:maxw,c.l[pm.lev].cliptim,rows)}"
cm_makeObj.prototype.tim=10;
cm_makeLevel.prototype.clippx=null
cm_makeLevel.prototype.cliptim=30
cm_makeObj.prototype.clipxy=0
cm_makeObj.prototype.clipout=function(px,w,stop,ti m,rows){
if(!this.vis) return; if(this.clipxy<stop-px){this.clipxy+=px;
if(!rows) this.clipTo(0,w,this.clipxy,0,1);
else this.clipTo(0,this.clipxy,w,0,1);
this.tim=setTimeout(this.obj+".clipout("+px+","+w+ ","+stop+","+tim+","+rows+")",tim)
}else{if(bw.ns6){this.hideIt();}; if(!rows) this.clipTo(0,w,stop,0,1); else this.clipTo(0,stop,w,0,1);if(bw.ns6){this.showIt() }}
}

[drhowarddrfine]

39 HTML errors need to be fixed first.

[rsteph]

I never knew that that site/tool existed. I've been going through the list of errors fixing them. But some of the errors they list make no sense to me. It may just be my lack of experience talking but...

for example:
with the datetime script I have written, it doesn't like the language="" attribute, but it doesn't mention that on any of the other scripts I read in.

Also it says that I can't use the background="" or onLoad="" attributes in the body tag. I figure I can add the background via the style sheet, but how do I utilize the onLoad option, if not in the body tag?

39 HTML errors need to be fixed first.

[rsteph]

I've gotten all the errors fixed, outside of the onLoad attribute in the <body> tag, and the errors that are caused as a result of Tripod's added code. Unfortunantly I can't do anything about those errors till I get the menu fixed, so I can get it put live on it's final hosting site.

[drhowarddrfine]

Because there is no language= attribute. Drop it.
Xhtml is lower case. Use 'onload' not 'onLoad'

Like I said before, the Tripod stuff is going to mess you up.

[rsteph]

Ok that takes care of all the errors I can fix.

My menu is still acting up in FF though, not appearing in the proper place, and scrolling with the screen. Anyone have a chance to check my scripts, and my CSS and see anything that looks problematic?

Because there is no language= attribute. Drop it.
Xhtml is lower case. Use 'onload' not 'onLoad'

Like I said before, the Tripod stuff is going to mess you up.

[rsteph]

If it helps anyone, I have learned through trial and error that in the style.css page, if I alter the .clB class position to static. It places the menu in the menubar on IE, and in the upper left corner in FF. In both cases the menu bar doesn't move, however it both cases the options are displayed in a vertical list, instead of horizontal, and the drop downs all appear over the first entry in the menu.

That's the most I've been able to accomplish towards an actual goal.

[AricC]

Which means absolutely nothing.
Absolutely false! ALL new pages should ALWAYS use a strict doctype!
Your page will never look correct until you fix your errors.

How can you say that 85% of the world using IE is nothing to consider? Why worry if all of your users are using IE? ALWAYS use Strict doctype? You can use transitional doctype and have a valid page.

[AricC]

The problem is your code was written in 2002 Firefox didn't come out until 2004 so there is no way the code was ever tested on it. Like I said you should try a different menu ( one with FF compatible support ) there are several sites you can find them on:

Dynamic Drive

Drop Menu

Javascript Kit

Or you could try using a CSS menu. If you are planning on moving your site from tripod then you should probably view it localy on your desktop to get a better idea of what it will look like on the web. Updating that code to handle FF would be a huge nightmare.

[drhowarddrfine]

The fact that IE is used more does not affect how you code. Always code to standards. All browsers do well with standard code, except IE, but if your code is correct, then you can adjust for IEs quirks and bugs. I did not say don't consider IE.

Yes, you can use the transitional doctype but what are you transitioning from? Transitional is so older code that uses deprecated elements can still be used. Why would you use deprecated code in new pages?

Code to current html and css and use the strict doctype.

[AricC]

His code wasn't XHTML so the Strict doctype would have produced more validation errors. Either way the doctype shouldn't have much to do with the menu problem.

[drhowarddrfine]

If he has validation errors then he has errors that need to be fixed.
The doctype has everything to do with his menu. Doctypes are the set of rules browsers follow.

[AricC]

I don't think you're looking at the problem his menu was created in 2002 long before Firefox was invented, doctypes aren't the problem.

[rsteph]

Regardless of all that, I'm guessing no one saw anything in my code, from looking at it, that stuck out at them as something to change to make it work. I'm playing around with some other menu code, to see if I can get what I want from it... but it'd be nice if I could make what I have work.

My best guess is that the error is somewhere in the cm_makeLevel() function, and how it utilizes some of the classes in the .css file.

[drhowarddrfine]

I don't think you're looking at the problem his menu was created in 2002 long before Firefox was invented, doctypes aren't the problem.

But html and css were created long before his menu. You must have a proper doctype nowadays for all web pages if you want to be cross browser compatible.

rsteph, it's hard to work on pages with errors in them. With web hosts offering $3/month hosting, you should look into that.

[AricC]

rsteph, it's hard to work on pages with errors in them. With web hosts offering $3/month hosting, you should look into that.

The hosting is one thing we will agree on Dr ;) there are some really cheap options out there. I looked through your Javascript and didn't see anything totally out of whack, however I think you can find a better supported menu elsewhere.

Web Host Inspector