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}