473,327 Members | 2,069 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

border style problem

At http://home.ne.rr.com/thespar/designerN.htm on my practice website, I am
using the stylesheet "side.css" below. The {body} tag is styled with a solid
border of 7.7 em to provide background for the left navigation bar, which is
positioned absolutely.

The problem can be seen near the bottom of the page, if you are using a 19"
monitor with 1024X768 resolution. In the middle of the #left navigation bar,
at the leverl of 3rd from the last picture, there is a discontinuity in the
solid left border extending into the #left navigation bar.

Any suggestions for the cause and remedy of the discontinuity would be
appreciated.

Thanks, CMA

body{border-left:7.7em solid #930; height: 100%;margin:0; padding-left:
1em;}
#left{position: absolute; top: 0; left: 0; width: 7.7em; background-color:
#930; height:100%; }
#navfirst{ margin-top: 3.2em;}
..navtop{ margin-top:34em;}
#navbottom{margin-top: 5%;}
#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 0em .35em 0em;
border-left: 1.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;}
Jul 20 '05 #1
7 2200
CMAR wrote:

The problem can be seen near the bottom of the page, if you are using a 19"
monitor with 1024X768 resolution. In the middle of the #left navigation bar,
at the leverl of 3rd from the last picture, there is a discontinuity in the
solid left border extending into the #left navigation bar.

(You've asked this question before.)
What OS? What browser? What versions? Is it only for those exotic
conditions (19" 1024x768)?
I see no discontinuity. What, exactly, does the discontinuity look like?

--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)
Jul 20 '05 #2
On my 17" monitor, there is no discontinuity. But on my 19" monitors, both
on the HD and online (the same link I gave the group), when you get to
middle of #6050 (the 8th from the bottom, not the 3rd from the bottom--my
mistake), the colored "background" (actually a border-left on the body tag),
cuts in about 1 em, and then continues down to the bottom of the page (as it
should) but the "background (=border) is narrower by about 1 em from that
point on to the bottom of the page.

I am reluctant to go live with my new design if it appears defective to
me, though no one else seems to see the problem that I am seeing.

BTW, this whole effort is a workaround to the absence of the "position:
fixed" implementation in IE.

Thanks, CMA


"jmm-list-tr" <jm***************@sohnen-moe.com> wrote in message
news:cc**********@216.39.176.229...
CMAR wrote:

The problem can be seen near the bottom of the page, if you are using a 19" monitor with 1024X768 resolution. In the middle of the #left navigation bar, at the leverl of 3rd from the last picture, there is a discontinuity in the solid left border extending into the #left navigation bar.
(You've asked this question before.)
What OS? What browser? What versions? Is it only for those exotic
conditions (19" 1024x768)?
I see no discontinuity. What, exactly, does the discontinuity look

like?
--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)

Jul 20 '05 #3
On my 17" monitor, there is no discontinuity. But on my 19" monitors, both
on the HD and online (the same link I gave the group), when you get to
middle of #6050 (the 8th from the bottom, not the 3rd from the bottom--my
mistake), the colored "background" (actually a border-left on the body tag),
cuts in about 1 em, and then continues down to the bottom of the page (as it
should) but the "background (=border) is narrower by about 1 em from that
point on to the bottom of the page.

I am reluctant to go live with my new design if it appears defective to
me, though no one else seems to see the problem that I am seeing.

BTW, this whole effort is a workaround to the absence of the "position:
fixed" implementation in IE.

Thanks, CMA

"jmm-list-tr" <jm***************@sohnen-moe.com> wrote in message
news:cc**********@216.39.176.229...
CMAR wrote:

The problem can be seen near the bottom of the page, if you are using a 19" monitor with 1024X768 resolution. In the middle of the #left navigation bar, at the leverl of 3rd from the last picture, there is a discontinuity in the solid left border extending into the #left navigation bar.
(You've asked this question before.)
What OS? What browser? What versions? Is it only for those exotic
conditions (19" 1024x768)?
I see no discontinuity. What, exactly, does the discontinuity look

like?
--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)

Jul 20 '05 #4
CMAR wrote:
On my 17" monitor, there is no discontinuity. But on my 19" monitors, both
on the HD and online (the same link I gave the group), when you get to
middle of #6050 (the 8th from the bottom, not the 3rd from the bottom--my
mistake), the colored "background" (actually a border-left on the body tag),
cuts in about 1 em, and then continues down to the bottom of the page (as it
should) but the "background (=border) is narrower by about 1 em from that
point on to the bottom of the page.
Maybe if you changed the color so the "defect" would show?
Change
#left{position: absolute; ...; background-color: #930; height:100% }
to
#left{position: absolute; ...; background-color: #930; }
What OS? What browser? What versions? Is it only for those exotic
conditions (19" 1024x768)?


--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)
Jul 20 '05 #5
Hi jmm:
I have already removed "height:100%;" from the #left selector. It does not
seem to make any difference.
My O/S is Win XP Pro, using IE6 on 19" monitor with 1024X768
resolution.
Thanks, CMA
"jmm-list-tr" <jm***************@sohnen-moe.com> wrote in message
news:cc**********@216.39.176.229...
CMAR wrote:
On my 17" monitor, there is no discontinuity. But on my 19" monitors, both on the HD and online (the same link I gave the group), when you get to
middle of #6050 (the 8th from the bottom, not the 3rd from the bottom--my mistake), the colored "background" (actually a border-left on the body tag), cuts in about 1 em, and then continues down to the bottom of the page (as it should) but the "background (=border) is narrower by about 1 em from that point on to the bottom of the page.

Maybe if you changed the color so the "defect" would show?
Change
#left{position: absolute; ...; background-color: #930; height:100% }
to
#left{position: absolute; ...; background-color: #930; }
What OS? What browser? What versions? Is it only for those exotic
conditions (19" 1024x768)?


--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)

Jul 20 '05 #6
CMAR wrote:
Hi jmm:
I have already removed "height:100%;" from the #left selector. It does not
seem to make any difference.
My O/S is Win XP Pro, using IE6 on 19" monitor with 1024X768
resolution.

Is the discontinuity the same on different browsers?
Did you change the background colors to see which CSS id is the problem?

--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)
Jul 20 '05 #7

"jmm-list-tr" <jm***************@sohnen-moe.com> wrote in message
news:cc**********@216.39.176.229...
CMAR wrote:
Hi jmm:
I have already removed "height:100%;" from the #left selector. It does not seem to make any difference.
My O/S is Win XP Pro, using IE6 on 19" monitor with 1024X768
resolution.
Is the discontinuity the same on different browsers?
Did you change the background colors to see which CSS id is the

problem?
--
jmm dash list at sohnen-moe dot com
(Remove .TRSPAMTR for email)


Your comment about changing background colors was the key to solving the
problem. I changed the background-color of the body. That told me that the
problem was that the #left navigation <div> did not extend to the bottom of
the viewport.

Originally, it never occurred to me that I should increase the "border-left:
7.7 em" of the {body} selector, because that border-left had been set to be
exactly the width of the #left navigation <div> as well as the width of
".sidelist".

But your idea made me realize that the size of {body}'s left border has no
affect on the placement of #left <div>, which is absolutely positioned.

Although the #left <div> has a width of only 7.7 em, the ".sidelist li a"
(anchor links) within the #left <div> now has "padding-right" of .5em and
"border-left" of 1em. So I increased the {body} border-left from 7.7em to
9em and that did the trick.

Jmm, thanks for the idea.
Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
by: Sheila King | last post by:
Hello, Am at my wits end, after spending quite a bit of time looking at online CSS docs, reading FAQs, searching this newsgroup and validating my CSS document. Was trying to copy, to some...
1
by: Trent L | last post by:
Hello, I'm having a problem where a style for a <a> tag isn't working in IE: border : 1px solid red; If you use my code below, you'll see what I mean. In IE6 on WinXP, I'm not seeing a red...
0
by: yurps | last post by:
Hello here is my html, if you click the missing image in the first column on the left, the div is shown, when clicked again the div disappears...but the bottom border disappears as well...Is there...
3
by: ireneatngs | last post by:
Hi, I have example html below which contains a couple of hidden divs. However, some of the table borders within these hidden divs are actually displayed when they should not be. In my...
2
by: Jon | last post by:
Hi all, I am trying to create a page that contains a number of div elements, with links on the left side of the page allowing the user to select which div to display. Some of the pages contain...
8
by: UJ | last post by:
I have a table with multiple cells and I want to draw a box around the entire table but not around the individual cells. How do I do that? TIA - Jeff.
2
by: progdis | last post by:
I want to apply css styles on a GridView, but there is some border magic in it, which applies border styles on the table. By default it sets an attribute border="0" on the table. If I set border...
16
by: FuzzyLogik | last post by:
By width, I don't mean weight. I have a row of <li>'s, with a bottom-border. I want the bottom-border to only go 90% of the <li> (centered) Is there any way to do this? I have it in this...
1
by: Armin Gajda | last post by:
Hi, I have the following problem: An input field get a border assigned by a style class (e.g. 2px solid red). When the field gets the focus, we set the border to green. element.style.border...
8
by: moondaddy | last post by:
I'm posting code for a user control ( FunctionConnectorSelector) below which has 3 content controls in it. each content control uses a style from a resource dictionary merged into the app.xaml...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.