Naviation Bar Border Thickness Problem

**keyboard** · 01-13-2012, 05:07 AM

Hello Everyone,

I'm currently using this html code

HTML Code:

<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Contact</a></li>
</ul>

and this css code

HTML Code:

ul#list-nav {
list-style:none;
margin:20px;
padding:0;
width:525px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#828282;
color:#eee;
float:left;
text-align:center;
border-left:1px solid Black;
border-top:2px solid Black;
border-right:1px solid Black;
}

ul#list-nav li a:hover {
background:#8B8989;
color:#eee
}

to make a navigation bar.

My problem is the border on either end of the bar is thinner than the border inbetween the boxes and on top of the boxes. I know why this is, - this bit of code

HTML Code:

border-left:1px solid Black;
border-top:2px solid Black;
border-right:1px solid Black;

(EDIT) - By the way. I want the border to be 2px wide.

But how can I still have the border running all the way around (excluding the bottom of the bar) and inbetween each button and still have it the same thickness.

Any help would be ... helpfull
Keyboard1333

**coothead** · 01-13-2012, 09:39 AM

Hi there keyboard1333,

try it like this...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
ul#list-nav {
    list-style:none;
    margin:20px;
    padding:0;
    width:525px;
    border-left:2px solid black;
    overflow:hidden;
 }
ul#list-nav li {
    display:inline
  }
ul#list-nav li a {
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#828282;
    color:#eee;
    float:left;
    text-align:center;
    border-top:2px solid black;
    border-right:2px solid black;
}

ul#list-nav li a:hover {
    background:#8b8989;
 }
</style>

</head>
<body>

<ul id="list-nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Downloads</a></li>
 <li><a href="#">Contact</a></li>
</ul>

</body>
</html>

coothead

**keyboard** · 01-14-2012, 04:53 AM

I tried the code you posted coothead.
There was a line between each of the boxes, to the right of the last box and on top of all the boxes but no line to the left of the first box.

I need the line there too.
Thanks Keyboard1333

**coothead** · 01-14-2012, 10:17 AM

Hi there keyboard1333,

the code that I provided was tested successfully in these browsers...

IE8
Firefox 3.6.25
IE9
Firefox 9.0.1
Opera 11.60
Safari 5.1.2

...and looked like the attached image in all of them.

coothead

**keyboard** · 01-14-2012, 10:40 PM

Okay, I just tested the code on its on and it worked fine (My apologies coothead!).
However when I try to intergrate it into the site it won't work.
Here is the full source code. (I'm sure the problem is really simple)

Home/index.php (html output)

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Fldr Studios</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="../Css/basic.css" />
<table class="outter" width="0" align="center"> 
<td width="850">
<table class="main" cellpadding="8" width="100%" >
 
<ul id="list-nav">
<li><a href="../Home">Home</a></li>
<li><a href="../About">About Us</a></li>
<li><a href="../Downloads">Downloads</a></li>
<li><a href="../Contact">Contact</a></li>
<li><a href="#">EXTRA</a></li>
</ul>
 
<tr>
<td class="mainIn">
 
<!--
</td></tr>
</table>
</td>		
</body>
</html>
--><!-- Main section -->
 
<!-- MAIN IN-->
<font size="+2">
Welcome to the Fldr Studios Website
</font>
<br />
<table width="780" height="500" bgcolor="blue">
<tr>
<td>
<font size="+5">
The Latest software by Fldr Studios
</font>
</td>
</tr>
</table>
<br />
ADVERTISE HERE - ADVERTISE HERE - ADVERTISE HERE - ADVERTISE HERE - ADVERTISE HERE
 
<!-- Main section end -->
<!--
<html>
<body>
<link rel="stylesheet" type="text/css" href="../Css/basic.css" />
<table class="outter" width="0" align="center"> 
<td width="800">
<table class="main" cellpadding="8" width="100%" >
<ul id="list-nav">
<li><a href="../Home">Home</a></li>
<li><a href="../About">About Us</a></li>
<li><a href="../Downloads">Downloads</a></li>
<li><a href="../Contact">Contact</a></li>
<li><a href="#">EXTRA</a></li>
</ul>	
<tr>
<td class="mainIn">
-->
 
 
</td></tr>
</table>
</td>		
</body>
</html>

Css/basic.css

HTML Code:

body
{
background-color:#E8E8E8;
font-family: arial;
}

p.largeSpace
{
line-height:150%;
}
ul#list-nav {
    list-style:none;
    margin:20px;
    padding:0;
    width:525px;
    border-left:2px solid black;
    overflow:hidden;
 }
ul#list-nav li {
    display:inline
  }
ul#list-nav li a {
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#828282;
    color:#eee;
    float:left;
    text-align:center;
    border-top:2px solid black;
    border-right:2px solid black;
}

ul#list-nav li a:hover {
    background:#8b8989;
 }




table.main
{

background-color:White;
color:black;
border:2px solid #828282;
padding: 0px;

}


table.menu
{

color:black;

width:100%;

}


table.outter
{

color:black;

}

If you can spot what I've done wrong, it would be great!

**coothead** · 01-14-2012, 11:45 PM

Hi there keyboard1333,

you should not be using the table element for page layout purposes, it
is twentieth century methodology, as is the use of the font element.

Further reading:-

With these issues in mind, I have rewritten your page.
Check out the attachment, to see the fruit of my labours.

coothead