471,066 Members | 1,298 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,066 software developers and data experts.

Discontinuity in background

I have a design of a frameless page on my practice website:

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

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.


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;}


#navlastdesign{margin-top: 113.8em;}


#navlast20s{margin-top: 98.26em;}

#navlast30s{margin-top: 83em;}

#navlastshawls{margin-top: 67.74em;}

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


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

margin-left: 0;

background: #930;


..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;}


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

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

..lnk {color:#FFFFFF;}



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

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

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

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:

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:

a:link { color:#0000FF; } a:hover { color: #FF0000}
Jul 20 '05 #1
1 2137
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.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Viken Karaguesian | last post: by
16 posts views Thread by stevedude | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.