layout - CSS Beginner Question

Hi.

There is a time here in Iceland that wee ppl have nothing to do, so i decided
to learn css php and html coding.

I do have a website that i am trying to modifie and mess things up to learn :)

The thing is that i do not have a clue how to do this.

There is 1 thing that i can´t figur out is that top boarder of my website has
a line cross the website and the bottom is not.

Is there someone who can help me with this.

Regard´s

Noaptus

p.s

Sorry for my bad English :)


Image attach an the css file

http://img33.imageshack.us/img33/9696/screenshot13d.png (http://img33.imageshack.us/i/screenshot13d.png/)

CSS File layout.css

/*
IE6 PNG FIX ---------------------------*/
/*img.trans { behavior: url(media/iepngfix.htc); }*/
/*
-----------------------------------------------
Grey Box Method - Layout CSS
----------------------------------------------- */

body {
background: #bbb;
border-top: 10px solid #FFFFFF;
color: #000;
font-size: 11px;
padding: 0 0 40px;
}


/* anchors
----------------------------------------------- */
a {
color: #000;
font-weight:bold;
text-decoration: none;
}
a:hover {
color:#333;
}


/* 960 grid system container background
----------------------------------------------- */
.container_12 {
background:#fff
/*
url("../img/gridlines_12_col.gif") center top repeat-y
*/
;
}


/* headings
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {line-height:1.2em; margin-bottom:.3em;}
h2 {margin-top:1em;}
h5 {font-size:1.2em;}
h6 {font-size:1em; text-transform:uppercase;}


h1 a {
font-weight:normal;
}


/* branding
----------------------------------------------- */
h1#branding {
font-weight:normal;
font-size:3em;
text-align:left;
background:#aaa;
padding:.7em 1em;
margin-bottom:0;
}
h1#branding a{
color: #013A6E;
}

/* page heading
----------------------------------------------- */
h2#page-heading {
font-weight:normal;
padding:.5em;
margin:0 0 10px 0;
border-bottom:1px solid #ccc;
}

.logo{
border: 0;
float: left;
}
small{
font-size: 0.8em;
}
/* boxes
----------------------------------------------- */
.box {
background:#ddd;
margin-bottom:20px;
padding:10px 10px 1px 10px;
}
.box h2 {
font-size:1em;
font-weight:normal;
text-transform:uppercase;
color:#fff;
background:#333;
margin:-10px -10px 0 -10px;
padding:6px 12px;
}
.box h2 a,
.box h2 a.visible {
color:#fff;
background:#333 url("../img/switch_minus.gif") 96% 50% no-repeat;
display:block;
padding:6px 12px;
margin:-6px -12px;
border:none;
}
.grid_4 .box h2 a {
background-position: 97% 50%;
}
.grid_5 .box h2 a {
background-position: 98% 50%;
}
.grid_12 .box h2 a {
background-position: 99% 50%;
}


.box h2 a.hidden,
.box h2 a.hidden:hover {
background-image: url("../img/switch_plus.gif");
}
.box h2 a:hover {
background-color:#111;
}
.block {
padding-top:10px;
}
.block img{
float:left;
}
div.menu {
padding:0;
}
div.menu h2 {
margin:0;
}
div.menu .block {
padding-top:0;
}


/* paragraphs, quotes and lists
----------------------------------------------- */
p {
margin-bottom:1em;
}
blockquote {
font-family: Georgia, 'Times New Roman', serif;
font-size:1.2em;
padding-left:1em;
border-left:4px solid #ccc;
}
blockquote cite {
font-size:.9em;
}
ul, ol {
padding-top:0;
}
abbr,acronym {
border:0;
}
abbr{
border-bottom:1px dotted #666;
border-color:inherit;
cursor:help;
}

/* menus
----------------------------------------------- */
ul.menu {
list-style:none;
border-top:1px solid #bbb;
}
ul.menu li {
margin:0;
}
ul.menu li a {
display:block;
padding:4px 10px;
border-bottom:1px solid #bbb;
}
ul.menu li a:hover {
background:#eee;
}
ul.menu li a:active {
background:#ccc;
}


/* submenus
----------------------------------------------- */
ul.menu ul {
list-style:none;
margin:0;
}
ul.menu ul li a {
padding-left:30px;
}


/* section menus
----------------------------------------------- */
ul.section {
border-top:0;
margin-bottom:0;
}
ul.section li {
text-transform:uppercase;
}
ul.section li a {
background:#bbb;
}
ul.section li a:hover {
background:#aaa;
}
ul.section li a:active {
color:#fff;
background:#666;
}
ul.section li li a {
background:#ddd;
}
ul.section li li a:hover {
background:#ccc;
}
ul.section li li a:active {
color:#000;
background:#fff;
}
ul.section ul li {
text-transform:none;
}
ul.section li.current a {
background:#eee;
}
ul.section li.current a:hover {
background:#ddd;
}
ul.section li.current a:active {
background:#fff;
}
ul.section li.current > a {
color:#fff;
background:#666;
}
ul.section li.current > a:hover {
background:#555;
}
ul.section li.current > a:active {
background:#444;
}
ul.section li.current a.active {
background:#fff;
cursor:default;
}
ul.section li.current > a.active,
ul.section li.current > a.active:hover {
color:#fff;
background:#666;
cursor:default;
}


/* table
----------------------------------------------- */
table {
width:100%;
border:1px solid #bbb;
margin-bottom:10px;
}
col.colC {
width:8em;
}
th, td {
padding:.2em 1em;
text-align:left;
}
thead th {
border-bottom:2px solid #888;
background:#bbb;
padding:.4em 1em .2em;
}
thead th.table-head {
font-size:1em;
font-weight:normal;
text-transform:uppercase;
color:#fff;
background:#555;
border:1px solid #555;
}
tbody th,
tbody td {
border-top:1px solid #bbb;
border-bottom:1px solid #bbb;
background:#eee;
}
tbody tr.odd th,
tbody tr.odd td {
background:#fff;
}
tfoot th,
tfoot td {
border-top:2px solid #666;
background:#eee;
}
tfoot tr.total th,
tfoot tr.total td {
border-top:6px double #666;
}
tfoot tr.total th {
text-transform:uppercase;
}
th.currency,
td.currency {
text-align:right;
}


/* forms
----------------------------------------------- */
form {
overflow:hidden;
}
fieldset {
border:1px solid #bbb;
padding:10px;
position:relative;
background:#e9e9e9;
margin-bottom:10px;
}
legend {
font-size:1.1em;
padding:.4em .8em;
background:#fff;
border:1px solid #bbb;
}
fieldset.login p {
margin-bottom:1em;
margin-top:0pt;
}
fieldset p label {
width:98%;
}
fieldset p input {
width:98%;
}
fieldset p select {
width:99%;
}
fieldset.login p label {
float:left;
line-height:2em;
margin-right:3%;
text-align:right;
width:32%;
}
fieldset.login p input {
width:40%;
}
fieldset.login input.button {
margin-left:35%;
}
form p.notice {
font-weight:bold;
}
input.search.text {
width:66%;
}
input.search.button {
width:28%;
margin-left:2%;
}
textarea{
width: 40%;
}

/* articles
----------------------------------------------- */
.articles {
padding:0;
}
.articles h2 {
margin:0;
}
#articles {
padding-top:0;
}
.article {
border-top:1px solid #666;
padding-top:.5em;
}
.box .article {
border-top:3px solid #fff;
padding:13px 10px 0 10px;
}
.article h2 {
font-size:2em;
font-weight:normal;
text-transform:none;
color:#333;
background:transparent;
padding:0;
margin:0;
border:none;
}
.article h3 {
margin-bottom:.2em;
font-size:1.6em;
}
.box .first {
border-top:none;
}
.article h4 {
font-size:1.2em;
text-transform:uppercase;
margin-bottom:.5em;
}
.article a.image {
float:left;
margin:3px 10px 3px 0;
padding:4px;
border:1px solid #bbb;
background:#fff;
}
.article a.image:hover {
border:1px solid #666;
}
.article a.image img {
float:left;
}
.article p.meta {
color:#666;
border-top:1px dotted #999;
border-bottom:1px dotted #999;
padding:.3em 0;
margin-bottom:.8em;
}


/* site information
----------------------------------------------- */
#site_info .box {
color:#fff;
background:#666;
margin-bottom:10px;
min-height: 40px;
height:auto !important;
height:40px;
}
#site_info img{
float:
float: left;
margin:0;
padding:0;
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 130px;
width: 215px;
padding: 10px;
background: #fff;
}
#kwick .kwick span {
color:#fff;
}
#kwick .one {
background: #666;
}
#kwick .two {
background: #777;
}
#kwick .three {
background: #888;
}
#kwick .four {
background: #999;
}
#kwick img {
float: left;
}

.green { color: #9EC630; }
.gray { color: #BFBFBF; }
.orange{ color: #FE9900; }
.dark-blue{ color: #5A6E8F}
.scarlet { color: #D62A2A}
.greenish { color: #83A750}
.blue{ color: #0E4FAF}
.right{ float: right}
.left{ float: left; }

.lightgray{ color: #DDDDDD;}
.top_banner{ float: right; padding: 10px;}Kwicks
----------------------------------------------- */
#kwick-box {
padding:0;
overflow:hidden;
}
#kwick-box h2 {
margin:0;
}
#kwick {
position: relative;
}
#kwick .kwicks {
display: block;
background: #9right;
margin: 0 2px;
}

/* AJAX sliding shelf
----------------------------------------------- */
#loading {float:right; margin-right:16px;}
.block {padding-bottom:1px;}


/* Accordian
----------------------------------------------- */
.toggler {
color: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size:1.1em;
font-weight: normal;
}
.element h4 {
margin: 0;
padding:4px;
line-height:1.2em;
}
.element p {
margin: 0;
padding: 4px;
}
.float-right {
padding:10px 20px;
float:right;
}

#accordian-block {
padding-bottom:10px;
}

#portfolio div.item{
float: left;
width: 320px;
padding: 5px 10px;
}

#portfolio img {
padding: 2px;
border: 1px solid #AAAAAA;
/*margin: 5px 15px 5px 5px ;*/
}

#portfolio a:hover img{
border: 1px solid #FE9900;
}
#brands{
height: 140px;
}
#brands img {
border: 0;
float: left;
}

#service img {
padding: 2px; margin: 5px;
border: 1px solid #AAAAAA;
}
#service a:hover img{
border: 1px solid #FE9900;
}
/* Mootools
overflow:hidden;
}
#kwick-box h2 {
margin:0;
}
#kwick {
position: relative;
}
#kwick .kwicks {
display: block;
background: #999;
height: 150px;
list-style:none;
margin:0;
overflow:hidden;
}
#kwick li {Kwicks
----------------------------------------------- */
#kwick-box {
padding:0;
overflow:hidden;
}
#kwick-box h2 {
margin:0;
}
#kwick {
position: relative;
}
#kwick .kwicks {
display: block;
background: #999;
height: 150px;
list-style:none;
margin:0;
overflow:hidden;
}
#kwick li {
float: left;
margin:0;
padding:0;
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 130px;
width: 215px;
padding: 10px;
background: #fff;
}
#kwick .kwick span {
color:#fff;
}
#kwick .one {
background: #666;
}
#kwick .two {
background: #777;
}
#kwick .three {
background: #888;
}
#kwick .four {
background: #999;
}
#kwick img {
float: left;
}

.green { color: #9EC630; }
.gray { color: #BFBFBF; }
.orange{ color: #FE9900; }
.dark-blue{ color: #5A6E8F}
.scarlet { color: #D62A2A}
.greenish { color: #83A750}
.blue{ color: #0E4FAF}
.right{ float: right}
.left{ flo
float: left;
margin:0;
padding:0;
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 130px;
width: 215px;
padding: 10px;
background: #fff;
}
#kwick .kwick span {
color:#fff;
}
#kwick .one {
background: #666;
}
#kwick .two {
background: #777;
}
#kwick .three {
background: #888;
}
#kwick .four {
background: #999;
}
#kwick img {
float: left;
}

.green { color: #9EC630; }
.gray { color: #BFBFBF; }
.orange{ color: #FE9900; }
.dark-blue{ color: #5A6E8F}
.scarlet { color: #D62A2A}
.greenish { color: #83A750}
.blue{ color: #0E4FAF}
.right{ float: right}
.left{ float: left; }

.lightgray{ color: #DDDDDD;}
.top_banner{ float: right; padding: 10px;}Kwicks
----------------------------------------------- */
#kwick-box {
padding:0;
overflow:hidden;
}
#kwick-box h2 {
margin:0;
}
#kwick {
position: relative;
}
#kwick .kwicks {
display: block;
background: #999;
height: 150px;
list-style:none;
margin:0;
overflow:hidden;
}
#kwick li {
float: left;
margin:0;
padding:0;
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 130px;
width: 215px;
padding: 10px;
background: #fff;
}
#kwick .kwick span {
color:#fff;
}
#kwick .one {
background: #666;
}
#kwick .two {
background: #777;
}
#kwick .three {
background: #888;
}
#kwick .four {
background: #999;
}
#kwick img {
float: left;
}

.green { color: #9EC630; }
.gray { color: #BFBFBF; }
.orange{ color: #FE9900; }
.dark-blue{ color: #5A6E8F}
.scarlet { color: #D62A2A}
.greenish { color: #83A750}
.blue{ color: #0E4FAF}
.right{ float: right}
.left{ float: left; }

.lightgray{ color: #DDDDDD;}
.top_banner{ float: right; padding: 10px;}
overflow:hidden;
}
#kwick-box h2 {
margin:0;
}
#kwick {
position: relative;
}
#kwick .kwicks {
display: block;
background: #999;
height: 150px;
list-style:none;
margin:0;
overflow:hidden;
}
#kwick li {
float: left;
margin:0;
padding:0;
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 130px;
width: 215px;
padding: 10px;
background: #fff;
}
#kwick .kwick span {
color:#fff;
}
#kwick .one {
background: #666;
}
#kwick .two {
background: #777;
}
#kwick .three {
background: #888;
}
#kwick .four {
background: #999;
}
#kwick img {
float: left;
}

.green { color: #9EC630; }
.gray { color: #BFBFBF; }
.orange{ color: #FE9900; }
.dark-blue{ color: #5A6E8F}
.scarlet { color: #D62A2A}
.greenish { color: #83A750}
.blue{ color: #0E4FAF}
.right{ float: right}
.left{ float: left; }

.lightgray{ color: #DDDDDD;}
.top_banner{ float: right; padding: 10px;}

it is because you are calling it out in your CSS.... look at your body
you have "border-top:10px solid #FFFFFF;"
that is saying i want a 10 pixel border (solid) of color #FFFFFF... #FFFFFF is hex for white hence your white border... also border-top signifies only at the top :)

it is because you are calling it out in your CSS.... look at your body
you have "border-top:10px solid #FFFFFF;"
that is saying i want a 10 pixel border (solid) of color #FFFFFF... #FFFFFF is hex for white hence your white border... also border-top signifies only at the top :)


So you are telling me that if i remove border-top then the white line is gone.

The thing is i want to have white line but not all the way.

if you want the white line (let's say on your "header" region) whatever element you do want to have that border, apply that CSS code to it. right now you are setting the entire body of the page to have that border