I'm setting up a new site, but am having issues ensuring compatibility across all the browsers.

The test page is:
http://www.foothillsbaptist.org/_NEW/index.php

If you look at the page in either FF or Safari, you'll see a few portions have widths that don't match the rest of the page... whereas in IE I believe they're all correct. This is the opposite of how I originally designed it and have been debugging it to get it to work with IE and instead just inversed the issue.

The divs in question are "blue_gradient":

#blue_gradient {
    display:block;
    width: 928px;
    height: 27px;
    border-right: 2px solid #133980;
    border-left: 2px solid #133980;
    background-image: url('../images/css/small_gradient.jpg');
    background-repeat: repeat-x;
}

and "nav_bar":

#nav_bar {
    display:block;
    width: 928px;
    height: 42px;
    border-right: 2px solid #133980;
    border-left: 2px solid #133980;
    background-image: url(../images/css/blueslate_background.gif) repeat-x;
}

I've tried using percentage widths, but that doesn't seem to do it either.

Another problem I spotted is the DIV I'm using to contain the logo at the top cuts short on IE, but is fine in the others..

Any ideas? I'm very new to using CSS so I'm hoping it's some novice error...

Thanks in advance for any help!

Nevermind... resolved... just didn't have a valid doctype... thanks

Which, for the uninformed, means that IE will operate in Quirks Mode and will yield incorrect results.

And for some more uninformed people, having an invalid doctype/no doctype at all is just one way to have IE render in quirksmode. Having a comment before a doctype can render IE6 (I believe it's only IE6, I think IE7 fixed this issue?) in quirksmode, and an XML declaration before the doctype also renders IE7 and below in quirksmode.

Cheers