html css nav bar list goes of the screen - html

okay so I am trying to position my links in my nav bar so they sit on the right of the bar.
problem is the items go off the screen.
here is a link
https://c9.io/ashg1990/secure/workspace/client/index.html
my html is below
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8" />
<title>ARG Modular</title>
<div class="head">
<img class="header" src="img/headlogo.png" alt="logo" />
<ul class="nav-main"><li>The Kit</li><li>Downloads</li></ul>
</div>
</head>
<body>
</body>
</html>
and my css is below
body {
background-color:#A8A1A3;
width:110%;
}
div.head {
position:absolute;
left:0;
top:0;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #FFFFFF),
color-stop(1, #A8A1A3)
);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #A8A1A3 100%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #A8A1A3 100%);
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #A8A1A3 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #A8A1A3 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #A8A1A3 100%);
width:110%;
border-bottom:thick groove #000000;
}
img.header {
display: block;
margin-left: 10px;
margin-top: 5px;
}
ul {
text-align:right;
}
ul.nav-main{
padding:0px;margin:0;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #1B211F),
color-stop(1, #525B58)
);
background-image: -o-linear-gradient(bottom, #1B211F 0%, #525B58 100%);
background-image: -moz-linear-gradient(bottom, #1B211F 0%, #525B58 100%);
background-image: -webkit-linear-gradient(bottom, #1B211F 0%, #525B58 100%);
background-image: -ms-linear-gradient(bottom, #1B211F 0%, #525B58 100%);
background-image: linear-gradient(to bottom, #1B211F 0%, #525B58 100%);
}
li{
display:inline-block;
padding:10px 0px 10px 10px;
}
a {
text-decoration:none;
color: #535E5A;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #6592A9, 0 0 30px #6592A9, 0 0 40px #ff2d95, 0 0 50px #6592A9, 0 0 75px #6592A9;
letter-spacing: 5px;
font: 30px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-right: 20px;
}
li {
margin:10px 10px 10px 10px;
}
can any body help me fix it so it sits on the right correctly


.head {
width: 100%;
}
instead of width: 110%;
Also, no need to overqualify selectors:
.header instead of img.header
.head instead of div.head

Related

i don't want any space between two divs, how can i do this?

Getting unwanted spaces between two divs , how can I do this? I mean there are two option like div 1 and div 2 and i don't want any spaces between them. I have tried with margin bottom, but it's not working. Here's my Code-
HTML
<a href="fee.html" style="text-decoration:none;">
<div class="div" style="margin-bottom:0px;">
<h2>OFFERS</h2> </div></a>
<a href="dept.html" style="text-decoration:none">
<div class="div"> <h2>CALL RATES</h2> </div>
</a>
CSS
.div {
text-align: left;
width:81%;
line-height: 298%;
opacity: .8;
margin-left:0%;
margin-bottom:0px;
border-radius:7px;
background-color: hsl(0, 69%, 22%) !important;
background-repeat:repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
background-image: -moz-linear-gradient(top, #b42121, #5e1111);
background-image: -ms-linear-gradient(top, #b42121, #5e1111);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
background-image: -o-linear-gradient(top, #b42121, #5e1111);
background-image: linear-gradient(#b42121, #5e1111);
border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
-webkit-font-smoothing: antialiased;
}

Remove margin from h2
h2 {
margin:0px /*set margin 0px*/
}
.div {
text-align: left;
width:81%;
line-height: 298%;
opacity: .8;
margin-left:0%;
margin-bottom:0px;
border-radius:7px;
background-color: hsl(0, 69%, 22%) !important;
background-repeat:repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
background-image: -moz-linear-gradient(top, #b42121, #5e1111);
background-image: -ms-linear-gradient(top, #b42121, #5e1111);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
background-image: -o-linear-gradient(top, #b42121, #5e1111);
background-image: linear-gradient(#b42121, #5e1111);
border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
-webkit-font-smoothing: antialiased;
}
<a href="fee.html" style="text-decoration:none;">
<div class="div" style="margin-bottom:0px;">
<h2>OFFERS</h2> </div></a>
<a href="dept.html" style="text-decoration:none">
<div class="div"> <h2>CALL RATES</h2> </div>
</a>

The problem isn't the <div>, it's your <h2>. By default, h tags have margin.
Set the margin on the <h2> to 0
h2 {
margin:0;
}
http://jsfiddle.net/fd8grojc/

css style for div tag height

I am setting all my div tags' height in pixels. I am having some problems and I think that if I set height in % it will help me. % is working for width, but unfortunately I can't set my div height in %.
Here is my CSS where I want to replace pixel with % height.
.header{
width:100%;
height:100px;
background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(201,201,201,1) 37%, rgba(229,229,229,1) 65%, rgba(209,209,209,1) 78%, rgba(209,209,209,1) 78%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(226,226,226,1)), color-stop(37%,rgba(201,201,201,1)), color-stop(65%,rgba(229,229,229,1)), color-stop(78%,rgba(209,209,209,1)), color-stop(78%,rgba(209,209,209,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* IE10+ */
background: linear-gradient(to right, rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d1d1d1',GradientType=1 ); /* IE6-9 */
}
.logo{
margin: 0px 0;
padding: 15px 0px 0px 130px;
cursor: pointer;
float:left;
}
.heading{
float: left;
margin-top: 0px;
margin-left: 6px;
height: 50px;
width: 75%;
background-color: #D1D0CE;
text-align:center;
}
body{
margin:0;
padding:0;
width:100%;
font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
overflow-x: hidden;
background-image:url('image/silver.jpg');
background-repeat:no-repeat;
background-size:cover;
}
.footer{
width:100%;
height:50px;
background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(201,201,201,1) 37%, rgba(229,229,229,1) 65%, rgba(209,209,209,1) 78%, rgba(209,209,209,1) 78%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(226,226,226,1)), color-stop(37%,rgba(201,201,201,1)), color-stop(65%,rgba(229,229,229,1)), color-stop(78%,rgba(209,209,209,1)), color-stop(78%,rgba(209,209,209,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* IE10+ */
background: linear-gradient(to right, rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d1d1d1',GradientType=1 ); /* IE6-9 */
}
h1{
display:inline-block;
}
.outer {
margin-left: 20%;
margin-top: 3%;
margin-bottom: 3%;
height: 737px;
width: 60%;
box-shadow: 10px 10px 5px #888888;
border: 1px solid #f9f2f2;
border-radius: 10px;
}
button.logout{
float:right;
margin-right:10px;
}
.log {
width:60%;
height: 10%;
position: absolute;
border: 1px solid #f9f2f2;
border-radius: 10px;
background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(top, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 0px solid #f9f2f2;
text-align: center;
line-height:20px;
border-width: 0px 0px 1px 1px;
}
.rest {
height: 685px;
background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(top, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 1px solid #f9f2f2;
border-width: 0px 0px 0px 0px;
border-radius: 0px 0px 10px 10px;
text-align: left;
padding: 0px 7px;
}
.sidemenu {
float: left;
margin-top: 150px;
width: 100%;
}
.content {
border-left: thick solid #f9f2f2;
}
.side{
width: 24%;
float: left;
display: inline-block;
}
hr {
margin: 0;
width: 1px;
height: 660px;
border: 0;
background: #fff;
float: left;
}
.astext {
background:none;
border:none;
margin:0;
padding:0;
cursor:pointer;
color:#000000;
line-height:35px;
font-family:arial;
font-size:13px;
font-weight:bold;
}
a.astext:link,a.astext:visited {
color:black;
background-color:transparent;
text-decoration:none;
}
a.astext:hover,a.astext:active {
color:black;
background-color:transparent;
text-decoration:none;
}
.menu{
height: 45px;
text-align:left;
margin-left:2px;
background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(top, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 1px solid #f9f2f2;
border-width: 0px 0px 0px 0px;
border-radius: 0px 0px 10px 10px;
text-align: left;
padding: 0px 7px;
}
.menu:hover{
background: -o-linear-gradient(top, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center bottom, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(bottom, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 1px solid #f9f2f2;
border-width: 0px 0px 0px 0px;
border-radius: 0px 0px 10px 10px;
text-align: left;
padding: 0px 7px;
}
<body>
<div class="main">
<div class="header">
<img src="image/DZB.png" class="logo" style="width:110px;height:70px" alt="logo"/>
</div> <!--End of header div-->
<div class="outer">
<div class="log">
<h1>Profile</h1>
<form method="post"> <button class="logout" name="logout" >Logout</button></form>
</div> <!--End of log div -->
<div class="rest">
<div class="side">
<div class="sidemenu">
<div class="1 menu">
Profile
</div> <!--End of menu1 -->
<div class="2 menu">
Clients
</div> <!--End of menu 2-->
<div class="3 menu">
Employees
</div> <!--End of menu 3-->
<div class="menu 4">
Documents
</div> <!--End of menu 4-->
</div> <!--End of side menu -->
</div> <!--End of side div -->
<hr>
<!-- <div class="heading" >
<h1>Profile</h1>
</div> End of heading div -->
<div class="content">
</div> <!--End of content -->
</div> <!--End of rest div -->
</div> <!--End of outer div-->
<div class="footer">
</div>
</div> <!--End of main div-->
</body>

may be it's not possible by this way. if you fixed any div's height by %, you have to fixed it's parent div's height. below an example...
css--
.parent_div{
height:500px;
position:relative;
}
.chield_div{
height:50%;
position:relative;
}

Try this
.sidemenu
{
left: 0px;
margin-top: 150px;
position: absolute;
height: 25%;
width: 30%;
}
<div class="sidemenu">
<div class="1 menu">
Profile
</div>
<div class="2 menu">
Clients
</div>
<div class="3 menu">
Employees
</div>
<div class="menu 4">
Documents
</div>
</div>

Navigation text interfering with regular?

I'm not sure what's going on here, but I'm trying to get it so the "Welcome to blabla" is on the right side of my thead. But it seems to glitch out?
screenshot: http://i.imgur.com/mCGCE8B.png
CSS Code:
body {
background-image: url('images/bg.png');
background-repeat: repeat;
padding: 0px;
margin: 0 0;
}
.content {
max-width: 1200px;
height: 800px;
margin: 0px auto;
background: #B9B9B9;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
box-shadow: 0px 5px 5px #000;
}
#navBack {
max-width: 1200px;
height: 30px;
background: rgb(30,87,153);
background: rgb(69,72,77);
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
margin: 0px auto;
border-bottom: solid #424242;
}
#navBack ul {
list-style-type: none;
height: 80px;
max-width: 1200px;
margin: auto;
}
#navBack li {
list-style-type: none;
height: 80px;
width: 100px;
margin: 0;
text-align: center;
float: left;
}
#navBack ul a {
background-image: url(images/nav_sep.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 0px;
padding-left: 0px;
display: block;
line-height: 30px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #000;
}
#navBack ul a:hover {
color: #fff;
}
.copyright {
max-width: 1200px;
height: 30px;
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
margin: 0px auto;
border-top: solid #424242;
text-align: center;
line-height: 30px;
box-shadow: 0px 3px 3px #000;
}
.copyright a {
color: green;
}
#theadTitle {
max-width: 1200px;
height: 30px;
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
border-bottom: solid #424242;
}
#thead {
max-width: 1200px;
height: 400px;
background-color: #CBCBCB;
margin: 20px 20px;
box-shadow: 0px 0px 3px #000;
}
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Noszscape - Home</title>
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content">
<div id="navBack">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Play Now</li>
<li>Download</li>
<li>Vote</li>
<li>Donate</li>
</ul>
</div>
<div id="thead" style="width: 75%">
<div id="theadTitle" > Welcome to Naszscape! </div>
</div>
</div>
<div class="copyright">
<span style="font-style:italic"><strong>All rights reserved ©</span> <span style="color: skyblue">317 Delta Coder</span> <span style="font-style:italic">2014</strong></span>
</div>
</body>
</html>

You have an inline style of width: 75% which is pushing the text off the side.
I would remove that and the max-width: 1200px; and add text-align: right; to the #theadTitle element.
See this fiddle.

space between css menu hover

here is my css menu code. i see empty space in menu when i move mouse over menu item. i tried to find some solutions. i think you can help, please heeeeelp
http://www.picz.ge/img/s3/1312/13/f/f85b3e9ef429.jpg here is a picture of it
HTML CODE
<div id="navcon">
<div id="nav">
<ul>
<li class="first">მთავარი</li>
<li> რეგისტრაცია</li>
<li>გალერეა</li>
<li>ჩვენ შესახებ</li>
<li>კონტაქტი</li>
</ul>
</div>
</div>
CSS CODE
#navcon {
background: #4a4a4a url(menu_assets/images/grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #cee7f7 0%, #10a5da 50%, #0577a8 51%, #3ebdea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #cee7f7 0%, #10a5da 50%, #0577a8 51%, #3ebdea 100%);
background: -o-linear-gradient(top, #cee7f7 0%, #10a5da 50%, #0577a8 51%, #3ebdea 100%);
background: -ms-linear-gradient(top, #cee7f7 0%, #10a5da 50%, #0577a8 51%, #3ebdea 100%);
background: linear-gradient(to bottom, #cee7f7 0%, #10a5da 50%, #0577a8 51%, #3ebdea 100%);
width: 100%;
opacity: 0.6;
}
#nav {
width: 100%;
height: 56px;
position: relative;
color: white;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
margin: 0px auto;
font-size: .9em;
text-align: center;
}
#nav ul {
list-style-type: none;
text-align:center;
list-style: none;
}
#nav > ul > li {
position: relative;
display: inline-block;
}
#nav ul li a {
border-right: 1px solid #5d5d5d;
padding: 20px;
display: inline-block;
text-align: center;
color: white;
text-decoration: none;
opacity: 1.6;
}
#nav > ul > li > a:hover {
background: #8a8a8a url(menu_assets/images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
#nav ul li ul {
display: none;
}
#nav > ul > li:hover ul {
display: block;
position: absolute;
}
#nav > ul > li:first-child a{
border-left: 1px solid #5d5d5d;
}

http://jsfiddle.net/isherwood/DMR6k/3
#nav ul {
display: table;
margin: 0 auto;
padding-left: 0;
}
#nav ul li {
display: table-cell;
}

Navigation UL/LI additional space

It's one of those days and I can not figure out why I'm getting a space to the left of each of the LI tags in the following code. If you hover over, the menu items you'll see what I mean.
http://jsfiddle.net/midnitesonnet/C2Dub/
<div id="wrapper">
<div id="menu">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>

I can not figure out why I'm getting a space to the left of each of the LI tags
Because you format them with display:inline-block - and have whitespace between the tags. That's basic "HTML behavior", that any whitespace between two inline(-block) elements is condensed to one space character when displayed.
Either float the LI instead, or write them without whitespace between the tags, meaning ...</li><li>...

try this
http://jsfiddle.net/C2Dub/4/
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin-top: 0px;
background-color: #f5f5f5;
}
#wrapper {
background-color: #ffffff;
width: 1000px;
margin: auto;
-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
-moz-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
/*-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;*/
}
#menu {
background: #505050;
background: -moz-linear-gradient(top, #505050 0%, #343434 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(50%,#343434));
background: -webkit-linear-gradient(top, #505050 0%,#343434 50%);
background: -o-linear-gradient(top, #505050 0%,#343434 50%);
background: -ms-linear-gradient(top, #505050 0%,#343434 50%);
background: linear-gradient(to bottom, #505050 0%,#343434 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 );
min-height: 26px;
color: #CCC;
}
#menu ul {
display: block;
height: 39px;
list-style: none outside none;
margin: 0;
padding: 0;
}
#menu li {
margin: 0;
display: inline-block;
height: 39px;
border-right: 1px solid rgb(0, 0, 0);
padding: 0px 20px !important;
line-height: 39px;
list-style: none;
float:left;
}
#menu li a {
display: inline-block;
width: 99%;
color: #CCC;
text-decoration: none;
}
#menu li:hover {
background: #6b6b6b;
background: -moz-linear-gradient(top, #6b6b6b 0%, #4c4c4c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b6b6b), color-stop(100%,#4c4c4c));
background: -webkit-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: -o-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: -ms-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: linear-gradient(to bottom, #6b6b6b 0%,#4c4c4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#4c4c4c',GradientType=0 );
}
#content {
min-height: 600px;
padding: 5px;
}
#footer {
min-height: 50px;
background: #f4f7f5;
background: -moz-linear-gradient(top, #f4f7f5 0%, #edf5f7 37%, #d3e8e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f7f5), color-stop(37%,#edf5f7), color-stop(100%,#d3e8e6));
background: -webkit-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: -o-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: -ms-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: linear-gradient(to bottom, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f7f5', endColorstr='#d3e8e6',GradientType=0 );
border-top: 1px #D2D2D2 solid;
}

This seems to work, I floated your li's, removed some padding and changed the height of the menu: http://jsfiddle.net/C2Dub/5/
#menu {
background: #505050;
background: -moz-linear-gradient(top, #505050 0%, #343434 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(50%,#343434));
background: -webkit-linear-gradient(top, #505050 0%,#343434 50%);
background: -o-linear-gradient(top, #505050 0%,#343434 50%);
background: -ms-linear-gradient(top, #505050 0%,#343434 50%);
background: linear-gradient(to bottom, #505050 0%,#343434 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 );
min-height: 39px;
color: #CCC;
}
#menu ul {
display: block;
padding: 0;
margin: 0;
list-style: none;
}
#menu li {
margin: 0;
float: left;
height: 19px;
border-right: 1px solid rgb(0, 0, 0);
padding: 10px 20px !important;
list-style: none;
}

U have some whitespace characters between your HTML code try to put the li tags on eachtoher:
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
This solved the problem in the Fiddle.