Hey

I'm working on a website found at www.valleylightbaptistchurch.net, and have run into a brickwall regarding the menu. It appears find in IE but is muble-jumbled in Firefox. Here is the CSS:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 17px 0;
padding: 0;
background: #006600 url(images/img5.gif) repeat-y center top;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
color: #000000;
}
h1, h2,{
margin: 10px;
padding: 0;
letter-spacing: -2px;
font-variant: small-caps;
font-family: Georgia, "Times New Roman", Times, serif;
color: #C73633;
}
h2 {
padding: 14px 0 0 35px;
word-spacing: 5px;
font-size: 1.95em;
}
h3 {
text-align: center;
padding: 0 0 10px 0;
word-spacing: 3px;
font-size: 1em;
font-family: Arial, "Times New Roman", Times, serif;
font-style: italic;
color: #000000;
}
h4 {
padding: 14px 0 0 0;
word-spacing: 5px;
line-height: 1cm;
font-size: 1em;
font-family: Arial, "Times New Roman", Times, serif;
color: #000000;
}
h5 {
text-align: center;
padding: 14px 0 0 0;
word-spacing: 5px;
line-height: 1cm;
font-size: 1em;
font-family: Arial, "Times New Roman", Times, serif;
color: #000000;
}
h6 {
padding: 14px 0 0 0;
word-spacing: 5px;
font-size: .85em;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000000;
}
h7 {
padding: 14px 0 0 0;
word-spacing: 5px;
line-height: 1cm;
font-size: 1em;
font-family: Arial, "Times New Roman", Times, serif;
color: #000000;
}
a {
color: #006600;
}
a:hover {
text-decoration: none;
color: #C73633;
}
.image {
float: left;
margin: 0 20px 15px 0;
}
.list, .list2c {
margin-left: 0;
padding-left: 0;
list-style: none;
line-height: 2em;
}
.list2c li {
float: left;
width: 50%;
}
/* Header */
#header {
width: 700px;
height: 80px;
margin: 0 auto;
}
#header h1 {
float: left;
padding: 11px 0 0 10px;
letter-spacing: -3px;
font-size: 3.5em;
}
#header h6 {
float: right;
padding: 20px 17px 0 0;
word-spacing: normal;
letter-spacing: 0px;
}
#header a {
text-decoration: none;
}
/* Menu */
#menu {
width: 700px;
height: 30px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 140px;
height: 25px;
padding: 7px 0 0 0;
background: #87A12C url(images/img6.gif) repeat-x left bottom;
text-align: center;
letter-spacing: -1px;
text-decoration: none;
color: #FFFFFF;
font-variant: small-caps;
font-weight: bold;
}
#menu a:hover {
background: #A71615 url(images/img3.gif) repeat-x left top;
}
/* Content */
#content {
width: 660px;
margin: 0 auto;
padding: 20px;
}
#colOne {
float: left;
width: 640px;
}
#colTwo {
float: right;
width: 363px;
}
/* Footer */
#footer {
clear: both;
width: 700px;
margin: 20px auto;
padding: 10px 0 0 0 0;
background: #87A12C url(images/img6.gif) repeat-x left bottom;
font: "Times New Roman", Times, serif;
}
#footer p, #footer a {
margin: 0;
text-align: center;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}

I know I cheated using header tags to format the page, but I am new to this. Any help would be appreciated. Thanks again.

When floating elements you should clear it before placing other markups. use this after closing header div.

<br style="clear:both" />

(Better place CSS in CSS file )
Alternatively you can add "clear:both" CSS rule in #menu style.
And it will be fine.

<br style="clear:both" />

Yep, that was the trick, thank you very much!

Somewhat more refined method:

.brclear {
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}


Then the html <br class="brclear" />

.brclear {
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Would this be the validator correct way to introduce appropriate spacing on the page? Or just a preference? Thanks. Also, why in css is /> added to the end of a tag?

That is just a method for clearing floats. The line-height: 0 and the font-size: 1px means that it does not add any vertical space either.

If you want to space out text using CSS, use margins and padding on your <p> tags.

why in css is /> added to the end of a tag?

It's not CSS, that is for XHTML as ALL TAGS must be closed in XHTML.