Centauri - I'm having problems matching your sample. I've uploaded what I did here. I pretty much just went back to my PSD and exported by hand from there. I copied your html/css with the intention of customizing where needed. Here are my issues:
1. Left border different color than rest of site borders. I used the same export settings on all graphics.
2. Nav button bg doesn't match navbar bg. Again I used the same export settings for all buttons and bg, and all are from the same file with on the only difference being the text layer is turned off in the bg slice. The nav buttons are in a smartobject. That shouldn't make a difference though.
3. Bottom of sidebar bg doesn't extend all the way to the bottom of the side bar leaving ~10px bar.
4. Safari/webkit doesn't render correctly. no site border other than the header. I believe IE is the same.
None of these problems are present in your example so there must be something I'm missing when copying your code and/or in exporting graphics.
Below is the HTML & CSS I'm using.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vacaville Trailer Sales</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/header.jpg" alt="logo image" title="">
<a href="index.html" title="Back to Home Page">Home</a>
</div>
<ul id="nav">
<li><a href="index.html" class="home">Home</a></li>
<li><a href="trailers.html" class="trailers">Trailers</a></li>
<li><a href="parts.html" class="parts">Parts</a></li>
<li><a href="service.html" class="service">Service</a></li>
<li><a href="contact.html" class="contact">Contact</a></li>
<li><a href="links.html" class="links">Links</a></li>
</ul>
<div id="content">
<h1>Page Title</h1>
<p>Content goes here</p>
</div>
<div id="sidebar">
<ul id="suppliers">
<li><a href="http://bigtextrailers.com/" class="bigtex">Big Tex Trailers</a></li>
<li><a href="http://www.cargomatetrailer.com" class="cargomate">Cargo Mate</a></li>
<li><a href="http://www.carry-ontrailer.com" class="carryon">Carry-on Trailer Corp</a></li>
<li><a href="http://paceamerican.com" class="pace">Pace American</a></li>
<li><a href="http://pjtrailers.com" class="pj">PJ Trailers</a></li>
</ul>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Code:
* {
margin: 0;
padding: 0;
}
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color: #A30601;
background-image: url(../images/bg-gradient.gif);
background-repeat: repeat-x;
color: #FFFFFF;
padding: 10px 0;
}
p {
margin-bottom: 1em;
}
#wrapper {
width: 975px;
margin: 0 auto;
background-image: url(../images/body_tile.png);
background-repeat: repeat-y;
}
#header {
height: 198px;
position: relative;
}
#header img {
vertical-align: bottom;
}
#header a {
position: absolute;
top: 5px;
left: 10px;
width: 275px;
height: 160px;
background-image: url(../images/spacer.gif);
text-indent: -999em;
}
#nav {
height: 48px;
background-image: url(../images/nav_bg.jpg);
background-repeat: repeat-x;
margin: 0 3px;
padding: 4px 0;
}
#nav li {
list-style: none;
float: left;
margin: 0 25px;
display: inline;
}
#nav a {
float: left;
width: 110px;
height: 48px;
background-position: center top;
font-size: 1px;
color: #C9C9C9;
background-repeat: no-repeat;
}
#nav a:hover {
background-position: center bottom;
}
#nav .home {
background-image: url(../images/home.jpg);
}
#nav .trailers {
background-image: url(../images/trailers.jpg);
}
#nav .parts {
background-image: url(../images/parts.jpg);
}
#nav .service {
background-image: url(../images/service.jpg);
}
#nav .contact {
background-image: url(../images/contact.jpg);
}
#nav .links {
background-image: url(../images/links.jpg);
}
#content {
width: 730px;
margin: 10px 0 0 10px;
float: left;
display: inline;
}
#content h1 {
text-align: center;
font-size: 200%;
line-height: 2em;
}
#sidebar {
width: 220px;
float: right;
margin-right: 3px;
background-image: url(../images/sidebar_bg.jpg);
background-repeat: repeat-x;
display: inline;
}
#suppliers {
width: 162px;
margin-left: 29px;
padding-top: 2px;
}
#suppliers li {
list-style: none;
}
#suppliers a {
display: block;
width: 162px;
background-position: center top;
text-indent: -999em;
background-repeat: no-repeat;
}
#suppliers .bigtex {
background-image: url(../images/bigtex.jpg);
height: 48px;
margin-top: 16px;
}
#suppliers .cargomate {
background-image: url(../images/cargomate.jpg);
height: 75px;
margin-top: 30px;
}
#suppliers .carryon {
background-image: url(../images/carryon.jpg);
height: 93px;
margin-top: 10px;
}
#suppliers .pace {
background-image: url(../images/pace.jpg);
height: 80px;
margin-top: 11px;
}
#suppliers .pj {
background-image: url(../images/pj.jpg);
height: 77px;
margin-top: 17px;
}
#footer {
height: 20px;
clear: both;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left bottom;
You must learn CSS & HTML. 
Bookmarks