rocknbil - 5:21 pm on Dec 20, 2011 (gmt 0)
Why is this in a table at all? Tables are for tabular data, like a spreadsheet, etc. In looking at the site layout, it's likely just the nature of tables - something doesn't "add up" vertically and is forcing the space. For starters, your image is 489 pixels high and you're setting a height of 500 on that cell.
How does this look to you? Copy and paste and give it a go. :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
margin: 12px auto;
height: 491px; /* img is 489 */
border-top: 1px solid #000;
border-bottom: 1px solid #000;
<img src="coverphoto.jpg" alt="Cover Photo - alt is still a required attribute">
The layout is fairly simple, create a parent container and set margin:auto on it so it centers in the viewport. Inside that container, float the "image" container and the navigation both left. Zero out the paddings and margins on these and make sure the widths add up to 1100. Set the navigation anchors ("a") to display: block, and indent the text in the anchors off-screen with a negative indent - this will allow you to use "regular text" inside the links without it overlapping the background images. Assign background images to the anchors.