David,
You don't need to wrap the list in a div. A list is a block level element just like a div and can be styled in the same fashion. I removed the "style1" class also because it was empty. The trick here is most of your styling is going to be focused on the anchor tags. We want to use a little as possible on the other elements.
For the list (UL), we remove any default margins and padding, and set a width if needed. Set the overflow to hidden, this will allow the height of the list to adjust to any floated elements within. There is no need for positioning, leave it as static (default) unless you pan to do something fancy. Ok, that is it here.
For the list items (LI), we remove any list style plus any padding and margins. This makes sure that our list items sit at the top of the list and are stacked right next to each other. Lastly, we align them horizontally starting from the left with a left float. Done here.
For the anchors (A), we set the display to block and set the height of each anchor (link). The width we want to leave as alone, as we want it to adjust based on the character length of the anchor text. Then add your background image for the static state. And then set the font style and color. Adjust the line height (aligns the text vertically). Set the text align and text decoration. Set the outline (if you want to remove the dotted line around the links that appears after clicking). The margins on the anchors will also need to be set to zero as we don't want space between the anchors, we want it inside the anchors. For this we use padding. The padding you will need to play with left/right settings to get the spacing exactly right. One last option is to use the white-space style. This can be set to "nowrap" which will make sure your anchor text reads on one line (only applies to links with more than one word). In the hover class, only add the styles you want to change from the original class. The only one that applies here is the background image.
Here is the code adjusted.
HTML:
<div id="content">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="estimates.html">Estimates</a></li>
<li><a href="general.html">General</a></li>
<li><a href="renovation.html">Renovations</a></li>
<li><a href="gunite.html">Gunite Pools</a></li>
<li><a class="shim" href="skate.html">Skate Parks</a></li>
</ul>
</div>
Code:
ul.links {
margin:0;
padding:0;
overflow:hidden;
}
ul.links li {
list-style-type:none;
margin:0;
padding:0;
float:left;
}
ul.links li a:link, ul.links li a:visited {
display:block;
height:35px;
background: url(gray.png) no-repeat;
font-weight:bold;
font-size:11pt;
color:#fff;
line-height:37px;
text-align:center;
text-decoration:none;
outline:none;
padding:0 27px 0 28px;
margin:0;
white-space:nowrap;
}
ul.links a:hover, ul.links a:focus {
background: url(dark.png) no-repeat;
}
ul.links li a.shim {
padding:0 29px; /* 29px was a guess, you might need to adjust this number */
}
That should do the trick. There will be a tiny space at the end of the last anchor (right side). You can create a extra style that adds a little more padding for that element.
Let me know if I missed something, or if you have other questions.