6 replies [Last post]
Truce77
Offline
newbie
Last seen: 16 years 36 weeks ago
Timezone: GMT-5
Joined: 2004-03-21
Posts: 7
Points: 0

Hi,

I'm getting a double border effect on my NavBar. Wierdly enough it only occurs on links that I have defined with a subSection.

I am working mostly with IE6 but I've noticed that it does the same thing in firefox.

Visualizing this problem will probably be the only way for anyone to help me out here so the link is: http://development.loukola.ca

Here is my NavBar Layout div

/* -------------NAV------------- */
#layoutNavBar{
	margin: 0px;
	float: left;
	width: 210px;
	padding: 0px;
	background-color: #eeeeee;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

Here are my link divs

/* -------------SECTION LINKS------------- */
#sectionLinks{
	position: relative;
	margin: 0px;
	padding: 0px;
	border-top: 1px solid #cccccc;
	font-size: 90%;
}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
	padding: 2px 0px 2px 10px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
    voice-family: "\"}\""; 
    voice-family:inherit;
	width: auto;
}

#sectionLinks a:visited{
	border-bottom: 1px solid #cccccc;
	padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
	border-bottom: 1px solid #cccccc;
	background-color: #dddddd;
	padding: 2px 0px 2px 10px;
}

/* -------------SUB SECTION LINKS------------- */
#subSectionLinks{
	position: relative;
	margin-left: 15px;
	padding: 0px;
	font-size: 70%;
	border: 0px;
}

#subSectionLinks h3{
	padding: 10px 0px 2px 10px;
}

#subSectionLinks a:link{
	padding: 2px 0px 2px 10px;
	width: 100%;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: auto;
}

#subSectionLinks a:visited{
	padding: 2px 0px 2px 10px;
}

#subSectionLinks a:hover{
	background-color: #dddddd;
	padding: 2px 0px 2px 10px;
}

Here is my nav page (it has some php in it too)

<div id="sectionLinks">
	<ul>   
		<li><a href="http://development.loukola.ca">Loukola Development Home</a></li> 
		<li><a href="http://development.loukola.ca/projects.php">Projects</a></li>
	</ul>
</div>

		<?php
		if ($section == 'projects'){
			?>
			<div id="subSectionLinks">
				<ul>
					<li><a href="http://development.loukola.ca/projects.php">Elevator Simulator</a></li>
					<li><a href="http://development.loukola.ca/projects.php">The Railway Heritage Building</a></li>
				</ul>
			</div>
			<?php
		}
		?>
	
<div id="sectionLinks">
	<ul>
		<li><a href="http://development.loukola.ca/resume.php">Resume</a></li> 
	</ul>
</div>
		
		<?php
		if ($section == 'resume'){
			?>
			<div id="subSectionLinks">
				<ul>
					<li><a href="http://development.loukola.ca/resume/">Resume</a></li>
					<li><a href="http://development.loukola.ca/resume/">Reference Letter - Nortel</a></li>
					<li><a href="http://development.loukola.ca/resume/">Reference Letter - Hydro One</a></li>
				</ul>
			</div>
			<?php
		}
		?>
		
		
<div id="sectionLinks">
	<ul> 
		<li><a href="http://development.loukola.ca/documents.php">Documents</a></li>
		<li><a href="http://development.loukola.ca/links.php">Links</a></li>
		<li></li>
	</ul> 
</div>

Thanks for you help

Dave

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Double Borders on Nav

Hi

In your style sectionLinks take out the border-top.

Does that fix it?

Trevor

Truce77
Offline
newbie
Last seen: 16 years 36 weeks ago
Timezone: GMT-5
Joined: 2004-03-21
Posts: 7
Points: 0

Double Borders on Nav

well...I have tried that before and yes it does fix it but now I don't have a top border on the links which I was hoping to keep.

It removes the top border on the top item and on the item below the subSection that is currently selected.

is there possibly a way to conditionally add a border to the top?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Double Borders on Nav

Hi

I think the original gap was due to a combination of this duplicated border-top and the padding. Have you experimented with either an extra outer container, or maybe using margin instead?

I seem to remember having this problem on a site a few months back, and I'm sure it was because of padding.

Trevor

Truce77
Offline
newbie
Last seen: 16 years 36 weeks ago
Timezone: GMT-5
Joined: 2004-03-21
Posts: 7
Points: 0

Double Borders on Nav

I have tried removing all of the padding and still no luck.

I can try adding a container, but what do you mean by adding a margin? I'm not really sure how it would apply here.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Double Borders on Nav

Hi

Ok, try this then. Find this code in your html:

  <!-- NAV LINKS -->
  <div id="sectionLinks">
	<ul>   
		<li><a href="http://development.loukola.ca">Loukola Development Home</a></li> 
		<li><a href="http://development.loukola.ca/projects.php">Projects</a></li>
	</ul>
</div>

			
<div id="sectionLinks">
	<ul>
		<li><a href="http://development.loukola.ca/resume.php">Resume</a></li> 
	</ul>
</div>
		
				
		
<div id="sectionLinks">
	<ul> 
		<li><a href="http://development.loukola.ca/documents.php">Documents</a></li>
		<li><a href="http://development.loukola.ca/links.php">Links</a></li>
		<li></li>
	</ul> 
</div>  <!-- END NAV LINKS -->

and change it to this:

  <!-- NAV LINKS -->
  <div id="sectionLinks">
	<ul>   
		<li><a href="http://development.loukola.ca">Loukola Development Home</a></li> 
		<li><a href="http://development.loukola.ca/projects.php">Projects</a></li>
		<li><a href="http://development.loukola.ca/resume.php">Resume</a></li> 
		<li><a href="http://development.loukola.ca/documents.php">Documents</a></li>
		<li><a href="http://development.loukola.ca/links.php">Links</a></li>
	</ul> 
</div>  <!-- END NAV LINKS -->

To me, this looks Ok, but was it what you wanted? You might need a <br /> to add some space at the end of it.

Trevor

Truce77
Offline
newbie
Last seen: 16 years 36 weeks ago
Timezone: GMT-5
Joined: 2004-03-21
Posts: 7
Points: 0

Double Borders on Nav

Great, thanks a lot of all of your help.

It seems to be working well now. I was just a little bit of on my methods.

Thanks

Dave