473,702 Members | 2,436 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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{marg in-top: 5%;}
#navlastdesign{ margin-top: 113.8em;}
#navlastdesign1 {margin-bottom:5%;}
#navlast20s{mar gin-top: 98.26em;}
#navlast30s{mar gin-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 2228
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.2 29...
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.2 29...
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.2 29...
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.2 29...
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
14491
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 extent, the "stylish buttons" tutorial here: http://www.webreference.com/programming/css_stylish/ and have had mostly success with it, however one stupid thing isn't
1
7525
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 top and bottom border. My HTML validates. It looks
0
2730
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 anyway to stop this...??? <HTML> <HEAD> <title>Conform Inbox</title> <meta content="False" name="vs_snapToGrid">
3
1068
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 example, I have comments indicating that if I remove the 'border-collapse' attribute for two of the tables within the hidden divs, my problem is fixed.
2
5290
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 tables with border styles used to block off the columns and the headers, but not the individual rows. The pages will be displayed using IE 5.5 and later in the finished app. Now to the problem, which is a little awkward to describe:
8
12095
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
6776
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 width 1px, it adds attribute style="border-style: solid; border-width: 1px;". I wonder, is it possible any how, to set the border style like this: BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 1px solid;
16
3280
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 format: CSS: li {
1
15327
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 = "2px solid green"; When the field looses the focus, the border should change back to red.
8
11500
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 file. each control has a border with another style, and each border has a unique path inside of it. I need to dynamically add these content controls using c# at runtime and am having trouble referencing the styles and adding the path into the...
0
8738
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8652
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8939
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7829
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6575
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5907
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4412
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3104
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2399
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.