Discontinuity in background

I have a design of a frameless page on my practice website:
http://home.ne.rr.com/thespar/designerN.htm



The idea is to have a #left navigation bar which is absolutely positioned
and which contains a series of vertical placed unordered lists of links. To
the right of the #left navigation bar is the #content section. I want the
background in the #left section to extend to the bottom of the browser
window.



That is done in the stylesheet "side.css" by giving the {body} a border-left
of 7.7em which is solidly colored. So the apparent background of the #left
element is actually the left border of the #content element. Since the
#content element is contained in the {body}, which has a height of 100%, the
left-border of the #content does extend to the bottom of the viewport, which
is what is desired.



Here is the problem. In the #left navigation bar, precisely at the bottom of
the last (of 9) unordered lists, you can see that there is a discontinuity
in the background, which then narrows from 7.7 em. Any suggestions on how
to fix this discontinuity would be appreciated.







Side.css

body{border-left:7.7em solid #930; height: 100%;margin:0; padding: 0;}

#left{position: absolute; top: 0; left: 0; width: 7.7em; background-color:
#930; }

#navfirst{ margin-top: 3.2em;}

..navtop{margin-top:34em;}

#navlastdesign{margin-top: 113.8em;}

#navlastdesign1{margin-bottom:5%;}

#navlast20s{margin-top: 98.26em;}

#navlast30s{margin-top: 83em;}

#navlastshawls{margin-top: 67.74em;}

#content{ margin-left:0; margin-right:0;}

..sidelist

{padding: .3em 0em .1em 0em;

margin-left: 0;

background: #930;

width:7.7em;}

..sidelist li

{list-style: none;

margin: 0;

border-top: 1px solid #930;

text-align: left;}

..sidelist li a

{ display: block;

text-decoration: none;

background: #930;

padding: .35em 0.5em .35em 0em;

border-left: 1em solid #930;

font:bold 0.61em Verdana, Arial, Helvetica, sans-serif;}

..sidelist li a:link { color: #FFF; }

..sidelist li a:visited { color: #FFF;}

..sidelist li a:hover

{border-color: #FE3;

color: #FFF;

background: #332;}



categories.css

body {margin: 0; padding: 0; color: Black; background-color: White;

font-family: "Times New Roman", Times, serif; }

..lnk {color:#FFFFFF;}

a:visited{color:#993399;}

a:hover,{color:#0000FF}

h1 {height: 1.7em; padding:.3em .3em .3em 1em; color: White;
background-color: Black;

font:1.48em "Times New Roman",Times,Serif; margin-bottom:
0.5em;}

h2.click{position:relative; top:.2em; color:#FF8040;
padding-left:2em;

font: italic bold medium "Times New Roman", Times, serif;}

#logo {position: relative; left: 44%;}

#itemtable { width: 100%; table-layout: fixed; }

#itemtable #col1 { width: 166px; }

#itemtable #col2 { width: 166px; }

#itemtable .row1 { vertical-align: top; background-color: #e5e5e5; }

#itemtable .row2 { vertical-align: top;background-color: #FFFFFF; }

#itemtable td.details {"Times New Roman", Times, serif; padding: .5em 4em
..5em 1.8em;

vertical-align: middle; font-size: 1em;}

#itemtable a img { border: none;width="166px" height="285px"}

.reserved { color: Red; font-weight: bold;}

.bi { font-weight: bold; font-style: italic;}

.at {font-style: italic; font-weight: normal; }

#navcontainer {background-color: #FF8040; margin-left: auto; margin-right:
auto;

padding-top: .45em; width: 100%;}

#navlist ul{ margin-left: 0; padding-left: 0; white-space: nowrap; }

#navlist li{display: inline; list-style-type:none;}

#navlist a{padding: 0 3em; font-size: 1em; }

#navlist a:link { color: #fff; text-decoration: none;}

#navlist a:visited { color: #fff; text-decoration: none;}

#navlist a:hover {color: #fff; background-color:#369; text-decoration:
none;}

a:link { color:#0000FF; } a:hover { color: #FF0000}

The odd thing is that when looked at on a 19" monitor, there is a
discontinuity in the background as described in my original posting. But
when looked at on a 17" monitor, there is not discontinuity.
Puzzling!
CMA