Inconsistent spacing in CSS

I am trying to create a box grid that has tight spacing, but it looks different
in every browser I view it in. The page I am referring to is at
http://www.gilday.com. The box I am referring to is under the bar: Additions,
Kitchens, etc. In Firefox, the navigation bar and the photos below it are the
same width, but there is some unneccessary same between the photos. In Explorer
and NEtscape the spacing looks fine but , the navigation bar is not as wide as
the photos below. In Netscape I lose the 1 pixel space between each link bar.
Is there a way to create a consistent look from browser to browser. The CSS
code I used to create the navigation bar is: #navbar { font: bold 12px
Arial, Helvetica, non-serif; text-align:center; vertical-align:middle;
text-decoration: none; color: white; letter-spacing: .2em; }
#navbar a{ display: block; padding: 3px; text-decoration:none;
width:115px; color:white; background-color:#047; }

I suspect that your efforts to apply CSS to these page elements are
being swamped by the needlessly complex table structure. Redo your page
with stacked and/or nested tables and you will have more control over
page elements.

--
James M. Shook
http://www.jshook.com