Hi, i have recently got into CSS. I am just finishing off my template but i have one problem - the bottom of my navigation bar has no boder around it. Ive messed with it for ages trying to fix it but i cant do it. Any ideas? Thanks. html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var { margin: 0; padding: 0; } body { background: #FFF; color: #000; font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif; letter-spacing: 1px; } h1, h2, h3, h4, h5, h6 { font-family: tahoma, garamond, times, serif; font-weight: bold; } h1 { font-size: 1.75em; line-height: 1.8em; } h2 { font-size: 1.5em; line-height: 1.55em; } h3 { font-size: 1.05em; line-height: 1.1em; } h4 { font-size: 0.95em; line-height: 1em; } h5 { font-size: 0.85em; line-height: 0.9em; } h6 { font-size: 0.75em; line-height: 0.8em; } img { border: 0; /* fixes firefox bug */ display: block; } #container { background: #ff9933 url("images/nav.png") top left repeat-y; color: #FFF; margin: 0 auto; width: 750px; } #header { height: 200px; } #menu { float: left; list-style: none; width: 200px; } #menu li { float: left; width: 200px; } #menu a { background: transparent; color: #FFF; display: block; font: 20px/15px georgia, helvetica, sans-serif; height: 1%; margin-left: 25px; padding: 8px 0; text-decoration: none; text-indent: 0px; } #menu a:hover { color: #FFD700; } #content { background: #FFF; color: #000; margin-left: 200px; min-height: 400px; } * html #content { height: 400px; /* for ie */ } #content .wrapper { border-bottom: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; margin-right: 1px; padding: 1em; } #content p { margin: 0.5em 0; } #footer { background: #FFF; clear: left; color: #000; padding-top: 16px; text-align: center; } #footer em { border-top: 2px solid #000; display: block; font: normal 100%/140% tahoma, helvetica, sans-serif; margin: 0 auto; padding: 0.5em 3em; width: 24em; /* DO NOT CHANGE THIS VALUE */ } Code (markup):
It would be helpful if you post the website link too, because there are different ways to deal with this depending of your website structure.
Its not online but i can give you the HTML... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Ben Davies - Come to the Fair!</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="A brief (160 character, including spaces) description of the current page goes here." /> <meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" /> <link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" /> </head> <body> <div id="container"> <div id="header"> <img src="images/banner.png" width="750" height="200"/> </div> <ul id="menu"> <li><a href="home.htm">Home</a></li> <li><a href="planning.htm">Planning</a></li> <li><a href="logo.htm">Logo</a></li> <li><a href="flyer.htm">Flyer</a></li> <li><a href="banner.htm">Banner</a></li> <li><a href="wristband.htm">Wristband</a></li> <li><a href="cd_case.htm">CD Case</a></li> <li><a href="digital_poster.htm">Digital Poster</a></li> </ul> <div id="content"> <div class="wrapper"> <h1>Welcome to my eportfolio!</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci. Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada, elementum et, urna. Proin vehicula viverra sapien. Integer eleifend, tortor et hendrerit vulputate, lectus enim pharetra risus, quis blandit nibh dui sed neque. Nunc nec odio vel odio porta fermentum. Sed quis arcu. Donec tristique scelerisque nibh. Nam lacinia libero a sem. Nunc volutpat, dui rutrum euismod sodales, ipsum dui accumsan libero, id consequat quam lorem vitae orci. </p> <p> Cras eu justo. Duis ornare ultrices urna. Integer eros. Nulla sagittis viverra purus. Sed massa quam, eleifend hendrerit, laoreet vel, auctor sit amet, nunc. Donec scelerisque. Cras sodales. Nulla facilisi. Ut molestie. Quisque rhoncus, nulla non auctor tincidunt, lectus sapien laoreet metus, non laoreet elit purus sollicitudin nulla. Praesent eget lacus sit amet sem elementum molestie. Etiam mattis eros quis libero. </p> <p> Vestibulum et massa. Cras pharetra metus ut quam. Fusce ac lectus. Nunc quis nibh ut tellus placerat mattis. Duis mi dolor, pharetra at, consectetuer in, aliquet eget, lacus. Ut malesuada mi sed ipsum. Integer tristique libero et lacus. Duis hendrerit, lectus sit amet porta rhoncus, ipsum quam placerat nunc, ac porta quam turpis ut erat. Vestibulum molestie, metus sit amet malesuada eleifend, lorem est dignissim nibh, a imperdiet turpis mauris a tortor. Nam porttitor lacus sed tellus. Phasellus tempus. In hac habitasse platea dictumst. Vivamus magna. In in sem. Morbi tristique metus at magna. Sed luctus laoreet turpis. Curabitur egestas varius nibh. Fusce condimentum pretium augue. Nam sollicitudin rutrum turpis. Quisque imperdiet. </p> <p> Integer turpis arcu, hendrerit id, lacinia non, volutpat quis, quam. Nunc pharetra. Vestibulum posuere lorem vitae odio. Donec risus mi, accumsan sed, mattis ut, gravida vehicula, massa. Duis auctor dui eu tellus. Nam hendrerit pulvinar est. Aenean nunc. In consectetuer. Duis rutrum sollicitudin tellus. Donec rutrum mollis eros. Aliquam eget odio vel pede rutrum dictum. </p> <p> Suspendisse potenti. In elit. Nunc nibh. Proin ac enim. Nulla tellus. Nunc ipsum mi, ornare dictum, hendrerit lobortis, pellentesque sit amet, magna. Sed dui nisi, dictum ac, auctor eu, tincidunt nec, nunc. Donec mattis, nisi non posuere accumsan, nulla sem congue elit, sit amet eleifend velit lacus sed dui. Duis urna est, iaculis non, malesuada ut, faucibus sit amet, dui. Nunc elementum, augue sed auctor imperdiet, risus nibh nonummy erat, in rutrum mi felis eu augue. Phasellus eros. Phasellus scelerisque pede id nisl. Sed ornare, ante ac laoreet blandit, sem lacus feugiat diam, eget consectetuer lorem massa in massa. Fusce commodo lectus vitae quam. </p> </div> </div> <div id="footer"> <em>Copyright © ; 2007, Ben Davies.</em> </div> </div> </body> </html> Code (markup):
Ok, using your HTML & CSS file I realize that you only have border for your content container ( wrapper ). If you just want border bottom for the menu, the easiest way to do this is to remove border-bottom from "wrapper" and add a border-top to "footer". But if you want the entire container with border, you should add border for container, border-top for footer and remove border-right and border-bottom for "wrapper". Hope i could help you.