Start cleaning up your html by removing the CSS and placing it in the CSS area.
Then start removing the CSS styles from the html and create classes for them. Then move them to the CSS area also.
To remove the top gap change this line.
<table id="table1" style="border-top: 1px solid rgb(128, 128, 128); border-bottom: 1px solid rgb(128, 128, 128); margin: -3px 0 0 0;" bgcolor="#000000" cellpadding="0" cellspacing="0" height="6" width="920">
To remove the bottom gap change this line
<img src="http://saltwaterphotography.smugmug.com/photos/632470513_knpWx-O.jpg" alt="Saltwater Photography - Featuring Australian Photographer Luke Kneale" border="0" height="33" width="920" style= "margin: 0px 0px -3px 0px;"> Joe, negative margins are generally a bad idea because they cause objects that are supposed to be laid out into the page to overlap and that can behave inconsistently among different browsers. In this case, it took a Google search for "extra space below image in my HTML" to find several possible solutions that don't involve negative margins.
Add a CSS id to this part of the HTML:
<div id="myHeader" bgcolor="#000000" style="margin: 0px;" align="center">
Add this CSS:
#myHeader img {display:block;}
By default an image is display:inline and apparently the div thinks it has some text in the div with the image that it needs to reserve space for.
According to the posts I found in Google, you could have also just set the height on the div and put the image in as the background or you could have specified a font-size:0 for the div.
Any of these will make the extra pixels go away.
I don't see any issue with the table of the navbar because it doesn't have a background that requires the block to be a specific height.
I would strongly suggest avoiding negative margins.