Yep put the brackets on and the red border went away, nice.
It’s nice to see your CSS you provided, I’m finally starting to see how things should layout and how other things affect each other.
Sorry about all the confusion with the widths. I just learned about the box model today, so I never calculated an widths or heights before.
I changed a few things around and they’re posted now, I am curious to see what new changes you’re talking about though!
What I did was set a 900px width along with 50px side paddings on the Content div. That makes it 1000px wide and then I centered it in the #wrapper so your content gets centered in the browser.
I was able to just float the #text div and #slideshow div left and right respectively without a bunch of margins.
Here is the page:
http://www.css-lab.com/test/bades/test.html
and the css:
http://www.css-lab.com/test/bades/page.css
You will also notice I did the same thing in the header. I set up an inner div and centered it with auto margins too. Then floated the logo and glass div left and right.
The .swirl element was eliminated altogether and that BG image was moved to the full width #header div and it repeats left and right from the center. It would be nice if you could make that a seamless repeating image but as it is it lines up with the Content div.
Those changes keep everything off the left side of the screen on wide monitors.
The menu still needs some work but we can cross that bridge later. You also need to come up with a more descriptive H1 than just “Welcome”. That won’t do you any good with google or your seo.
Thanks Ray, I’ll check your pages out.
As for the Swirls, I was trying to position the Shrimp over the repeat so you didnt see the line.
But to be honest I could easily go back into photoshop and change it to make it seamless, just being a bit lazy I guess. 
Just checked it out, looks good. To be honest I’m not quite sure why I set it up the way I did, ha, the site needs to be put up tomorrow, for a friend, but I might change it down the road, when I finish up the other pages.
Thanks for all your help, I’ve learned a lot
Now what about Nav li spans being display: none?
Should they be like margin-left:-999em; ?
Isn’t it for SEO purposes or something?
As for the Swirls, I was trying to position the Shrimp over the repeat so you didnt see the line.
Yeah I knew you was trying to line it up on the right side for some reason that’s why I set up the inner div in the header and just floated it right.
I thought maybe you were trying to line it up with the slideshow on your version.
Make it a seamless image and it will look better, we can always place the logo and the shrimp image to the far left and right of the page too if that’s what your after.
Now what about Nav li spans being display: none?
Should they be like margin-left:-999em; ?
Isn’t it for SEO purposes or something?
You should set up live text underneath the sprite nav so the page can still be navigated with images turned off.
Sprite Nav with Replacement Text
Gotta go eat now, I’ll check back later 
I have gone ahead and reworked your sprite nav with the replacement text I was talking about.
Updated page:
http://www.css-lab.com/test/bades/test.html
and css:
http://www.css-lab.com/test/bades/page.css
If you view the page with images turned off you will see the text and it will still make sense.
I have made a lot of comments in the CSS so it should be easy to follow. I’ll give it a quick rundown here though. What we are doing is layering an empty <b> element on top of the text. We are using a <b> since it is an inline element so it can be legally nested in the anchor.
Rather than setting multiple background positions for the different pseudo states we can just raise the <b> element up with negative top margins. That <b> element is actually set at the same height as your sprite image (117px) but the anchor is set to 39px height with overflow:hidden; to hide the oversized <b>.
The x-axis BG positions are still needed, the end result is a much leaner set of rules that is actually doing more work.
The html:
<ul id="main">
<li><a class="home" href="index.html">home[COLOR=Blue]<b></b>[/COLOR]</a></li>
<li><a class="about" href="about.html">about[COLOR=Blue]<b></b>[/COLOR]</a></li>
<li><a class="events" href="events.html">events[COLOR=Blue]<b></b>[/COLOR]</a></li>
<li><a class="partners" href="partners.html">partners[COLOR=Blue]<b></b>[/COLOR]</a></li>
<li><a class="contact" href="contact.html">contact[COLOR=Blue]<b></b>[/COLOR]</a></li>
<li><a class="testimonials" href="testimonials.html">testimonials[COLOR=Blue]<b></b>[/COLOR]</a></li>
</ul>
and the CSS:
/*=== Sprite Navigation with Replacement Text ===*/
#main {
height: 39px;
padding-left: 10px;/*push first link 10px to the right*/
background: #4A4743 url(site_images/nav_extra.gif) repeat-x;
}
#main li, #main a {
float: left;
}
#main a {
height: 39px;
overflow: hidden;/*hide the 117px tall <b> element*/
position: relative;/*containing block for AP'd <b>*/
/*styles below for images off */
color: #FFF;
text-align: center;
font: bold 13px/36px arial;
}
/* Style for images off on pseudo states */
#main a:active,
#main a:focus,
#main a:hover {
color: #FFF;
background: #333;
cursor: pointer;/* IE6/7 */
}
/* Set all the class widths one time only*/
#main a.home {width: 48px;}
#main a.about {width: 87px;}
#main a.events {width: 86px;}
#main a.partners {width: 97px;}
#main a.contact {width: 99px;}
#main a.testimonials {width: 126px;}
#main a b {/* Sprite image applied to the <b> element */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 117px;/* full height of sprite image */
background: url(site_images/nav_sprite.jpg) no-repeat;
}
/* Eliminate multiple BG positions on pseudo states by using neg margins */
#main a:hover b {margin-top: -39px}
#main a:active b {margin-top: -78px}
/* Set the mandatory x-axis positions */
#main a.home b {background-position: 0px 0px;}
#main a.about b {background-position: -48px 0px;}
#main a.events b {background-position: -135px 0px;}
#main a.partners b {background-position: -221px 0px;}
#main a.contact b {background-position: -318px 0px;}
#main a.testimonials b {background-position: -417px 0px;}