I built this site awhile back and now that people are getting IE 7, I've noticed the layout is goofy. The site is at http://www.villageofmillstadt.org/millstadt/home.htm. Is there something I can do in the css file to fix the problem or will I have to redo the whole site?

Any help is appreciated.

The problem with IE7 is most likely due to some hacks you used to make your sites work for pre version 7 IE. You will need to figure out how to make the sites work in IE7, but you don't necessarily need to redo your entire site.

There are ways you can serve different style sheets to different browsers. In this case I think using conditional comments might be the easiest

Now I've got IE7 pretty much resolved but in the process, the page is no longer visible in Firefox! I can't figure out how I did this but the whole page is gray. I've validated both the XHTML and CSS so I know the code is good. I just have a booboo. Help?

Let's see the updated code or an update page

You also might want to peruse this page:
http://css-discuss.incutio.com/?page=IE7

The page is at http://www.villageofmillstadt.org/millstadt/home.htm.

Here's my CSS code (and I apologize in advance if it's messy - it was one of my first attempts BUT I did get it and the HTML to validate!).

html { 
  padding:0px;
  margin:0px;
}
body {
 font-size: 12px;
 font-family: Verdana, Arial, Sans-Serif;
 color: #000000;
 text-align: center;
 margin: 0px;
 padding: 0px;
 background: url(flagbg_mn2.jpg);
}
.style1 {color: #FFFF00}
h1 {
font-size:16px;
padding-top:10px;
padding-left:5px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
 }
 
h2 {
font-size:11px;
font-weight:normal;
padding-left: 10px;
color: #000000;
background-color: transparent;
 }
 
h3 {
font-size:11px;
font-weight:normal;
padding-top:10px;
padding-left: 10px;
color: #ffffff;
background-color: transparent;
 }
 
h4 {
font-size:11px;
font-weight:bold;
padding-top:5px;
padding-left: 15px;
color: #8B0000;
background-color: transparent;
 }
 
h5 {
 font-size: 11px;
 font-weight: normal;
 padding-top: 0px;
 padding-left: 20px;
 color: #000000;
 background-color: transparent;
}
 
a { 
color: #000099;
font-size: 11px;
font-weight: bold;
background-color:transparent;
text-decoration:underline; 
}
p { 
color: #000000;
font-size: 11px;
background-color:transparent;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#box {
width:750px;
margin: 0px auto;
padding:0px;
text-align:left;
background: #000153 url(blbg2.gif) repeat-y 50% 0;
}
#left {
width:182px;
padding:0px;
float:left;
background-color: transparent
}
#content {
width:378px;
padding:0px;
float:left;
overflow: auto;
}
#right {
width:165px;
padding:0px;
float:right;
background-color: transparent
}
#head {
background-color:transparent;
margin:0px;
height:20px;
}
#head h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #FFFFFF;
background-color: #4E4C5C;
padding:5px 15px;
margin:0px
}
#head p {
padding:10px;
margin:0px;
}
#button {
width: 160px;
border-right: 0px;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Verdana', Arial, Helvetica, sans-serif;
font-size: 60%;
background-color: #000153;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #00014F;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 5px solid #2C2455;
border-right: 5px solid #000153;
background-color: #332C63;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 5px solid #0E3478;
border-right: 5px solid #483D8B;
background-color: #FFFFFF;
color: #332C63;
}
#footer{
background-color:#564b47; 
width:750px;
height: auto;
} 
#footer h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #FFFFFF;
background-color: #4E4C5C;
padding:5px 10px;
margin:0px
}

Any help would be greatly appreciated!

First thing you need to do is clear your floats, then your white box will show up.
http://css-discuss.incutio.com/?page=ClearingSpace

Several other things you need to address.
- do not use heading tags for your normal text. An entire page cannot be a heading. Specify your font sizing in your CSS file. This will also eliminate those nasty <font> tags.
- don't use <center> - it's deprecated and you can center the layout using CSS
- don't use <br>s for spacing, use your CSS
-watch your nesting of elements, you've go several things in there that are incorrectly nested
- check that all your divs are closed in proper order, it appears you have an extra div in your code at the end.