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{posi tion:absolute; z-index:300; width:100%; height:100%; clip:rect(0,100 %,100%,0); left:0; top:0; visibility:hidd en}
.clCMAbs{positi on:absolute; width:10; height:10; left:0; top:0; visibility:hidd en}

.clT,.clTover,. clS,.clSover,.c lS2,.clS2over{p osition:absolut e; overflow:hidden ; width:130; height:30; cursor:hand}
.clT,.clTover{p adding:2px; font-size:16px; font-weight:bold}
.clT{color:whit e; }

.clTover{color: #7AD0E1;}

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

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

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

.clSover,.clS2o ver{color:#7AD0 E1;}

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

.clB{position:a bsolute; visibility:hidd en; z-index:300}
.clBar{position :absolute; width:10; height:30; visibility:hidd en; }

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

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.dt d">

[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.