Resolved Naviation Bar Border Thickness Problem [Archive]

View Full Version : Resolved Naviation Bar Border Thickness Problem

keyboard

01-13-2012, 05:07 AM

Hello Everyone,

I'm currently using this 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

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

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

<!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)

<!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">




<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




</td></tr>
</table>
</td>
</body>
</html>

Css/basic.css

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. :eek:

Further reading:-

Why tables for layout is stupid: problems defined, solutions offered (http://www.hotdesign.com/seybold/index.html)
Ten ways to speed up the download time of your web pages (http://www.webcredible.co.uk/user-friendly-resources/web-usability/speed-up-download-time.shtml)
Nested Tables: About the (ab)use of tables as layout tools in webpages. (http://www.dorward.me.uk/www/nested/)
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS (http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html)
Why go table free? (http://www.workingwith.me.uk/tablefree/why/)
Why avoiding tables (for layout) is important (http://davespicks.com/writing/essays/notables.html)

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

coothead

keyboard

01-16-2012, 07:02 AM

Thanks so much coothead!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
It's AWESOME!!!!

coothead

01-16-2012, 07:18 AM

No problem, you're very welcome. ;)
coothead