Spacing between html form input items - html

For some reason the form I created has a lot of space between each input type. I tried doing form{ padding: 0px; margin: 0px; border: none; } but that did not work. I am not sure how to quite solve this issue if anyone can help. I added a JSFiddle to show everyone what I am talking about. Thank you for the help in advance.
http://jsfiddle.net/dyZ8B/
HTML Code:
<body>
<div class="header">Our Really Cool Banking App</div>
<div id="leftcolumn">
<!-- Creating Buttons here -->
<div id="nav">
<ul>
<li>Home</li>
<li>Checking</li>
<li>Savings</li>
<li>Create Account</li>
<li>Create Loan</li>
</ul>
</div>
</div>
<div id="checking" class="toggle" style="display:none">show the stuff1</div>
<div id="savings" class="toggle" style="display:none">show the stuff2</div>
<div id="createaccount" class="toggle" style="display:none">show the stuff3</div>
<div id="createloan" class="toggle" style="display:none">show the stuff3</div>
<div class="inputBox">
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Username: <input type="text" name="username"><br>
Amount: <input type="text" name="amount"><br>
Type: <input type="radio" name="accounttype" value="Checking">Checking
<input type="radio" name="accounttype" value="Savings">Savings<br>
Action: <input type="radio" name="bankaction" value="Deposit">Deposit
<input type="radio" name="bankaction" value="Withdraw">Withdraw<br>
<input type="submit" value="Submit">
</form>
</div>
<?php
//To Test
var_dump($_POST);
?>
</body>
CSS Code:
.header {
position: relative;
width: 1265px;
line-height:68px;
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
/* styles under are just for fun */
border-radius: 5px 5px 0 0;
text-indent: 20px;
text-transform: uppercase;
font-family: arial;
font-weight: bold;
color: white;
}
/* making backgrounds compatible */
.header {
background: rgba(20,82,159,1);
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
height: 650px;
margin-top: -16px;
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
color: white;
}
#leftcolumn {
background: rgba(20,82,159,1);
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}
#nav {
color: white;
}
#nav ul {
padding-top: 40px;
padding-left: 15px;
}
#nav ul li {
list-style-type: none;
text-decoration: none;
font-size: 18px;
font-family: Verdana;
margin: 0px 0 40px 0;
}
a:link {color:white;}
a:visited {color:white;}
a:active {color:white;}
a:hover {color:rgb(152,152,152);}
.inputBox {
position: relative;
width: 500px;
line-height:100px;
margin-top: 25px;
margin-left: 450px;
padding-bottom: 10px;
/* styles under are just for fun */
border-radius: 5px 5px 0 0;
text-indent: 20px;
text-transform: uppercase;
font-family: arial;
font-weight: none;
font-size:12px;
color: white;
text-align: center;
}
form{
padding: 0px;
margin: 0px;
border: none;
}
.inputBox {
background: rgba(20,82,159,1);
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}


It's because of the line-height set on the .inputBox elements.
Updated Example Here
.inputBox {
position: relative;
width: 500px;
line-height:100px; /* Remove or reduce this value */
}

Related

Horizontal navbar menu submenu alignment

In the following code, I am creating a navigation bar. When you hover on an item in the navbar, it displays a drop down menu. Certain items on the drop down menu display a submenu when hovered. All this is working, but when the submenu displays, I am having issues with the positioning of its top property. I have tried making its' parent div position:relative, adjusting it's top: position, adjusting the display property, etc., but can't seem to locate the problem.
#nav {
width: 886px;
height: 32px;
margin: 1px auto 0 auto;
border-top: 1px solid #B1B6B9;
border-bottom: 1px solid #646E73;
background-color: #A9AFB2;
/* 50% gray */
background: -moz-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbbfc1), color-stop(100%, #7f878b));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* IE10+ */
background: linear-gradient(to bottom, #bbbfc1 0%, #7f878b 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ffBBBFC1', EndColorStr='#ff7F878B');
padding: 0 40px;
}
.navone {
position: relative;
top: 0;
left: 0;
height: 32px;
float: left;
margin-bottom: -3px;
z-index: 150;
width: auto;
}
.navone a {
text-decoration: none;
float: left;
height: 16px;
color: #FFFFFF;
font-family: Jabas, Arial, Helvetica, sans-serif;
font-size: 19px;
padding: 5px 14px 11px 14px;
display: block;
border-left: 1px solid #B1B6B9;
border-right: 1px solid #737C81;
text-shadow: -1px -1px 0px rgba(84, 95, 101, .35);
}
.navone a:hover {
text-decoration: none;
background-color: #567697;
/* 75% dark blue */
background: -moz-linear-gradient(top, #567697 0%, #1e4975 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #567697), color-stop(100%, #1e4975));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #567697 0%, #1e4975 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #567697 0%, #1e4975 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #567697 0%, #1e4975 100%);
/* IE10+ */
background: linear-gradient(to bottom, #567697 0%, #1e4975 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ff567697', EndColorStr='#ff1E4975');
}
.navone a.active {
background-color: #89A8C7;
/* 55% blue */
background: -moz-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #89a8c7), color-stop(100%, #5480ad));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* IE10+ */
background: linear-gradient(to bottom, #89a8c7 0%, #5480ad 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ff89A8C7', EndColorStr='#ff5480AD');
}
.navone:hover .navtwo {
display: block;
}
.navtwo {
border-top: 1px solid #65809B;
display: none;
position: absolute;
top: 32px;
left: 0px;
z-index: 200;
width: 100%;
-webkit-box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
-moz-box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
}
.navtwo a {
color: #3E6082;
background-color: #D8E2EC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
width: 90%;
height: auto;
display: block;
padding: 4px 5%;
border: 1px solid #B1C5DA;
box-sizing: box-border;
border-top: 1px solid #FFFFFF;
text-shadow: none;
}
.navtwo a:hover {
color: #FFFFFF;
background-color: #3E6082;
text-decoration: none;
}
.dropdown {
position: relative;
}
.dropdown > a {
background: #C1C5C7 !important;
color: #32393D !important;
font-weight: bold;
border-top: 1px solid #E0E2E3;
border-bottom: 1px solid #A2A8AB !important;
z-index: 50;
}
.dropdown > a:after {
float: right;
content: "\25B6"
}
.dropdown:hover > a {
background: #92999D !important;
}
.dropdown-content {
display: none;
z-index: 100;
}
.dropdown-content a {
padding: 4px 8px;
width: 150px;
}
.dropdown:hover .dropdown-content {
display: block;
position: absolute;
top: 0;
left: 100%;
}
<div id="nav">
<!--begin of option-->
<div class="navone">
Option
<div class="navtwo">
<!--begin of dropdown menu-->
<div class="dropdown">
Test 1
<!--begin of submenu-->
<div class="dropdown-content">
Test Submenu
Test Long Submenu
Test Longest Submenu
</div>
</div>
<!--begin of dropdown menu-->
<div class="dropdown">
Test 2
<!--begin of submenu-->
<div class="dropdown-content">
Test
Long Test
The Longest Test
</div>
</div>
Test 3
</div>
</div>
<!--end of option-->
<div class="navone">
Longer Option Name
<div class="navtwo">
<div class="dropdown">
Test 1
<div class="dropdown-content">
Test Submenu
Test Long Submenu
Test Longest Submenu
</div>
</div>
Test 2
Test 3
</div>
</div>
</div>
or JSFiddle: https://jsfiddle.net/cshanno/1fsk6fm2/5/
WANTED MINE
----------- -----------
| NavOption | | NavOption |
----------- ----------- ---------
| Dropdown | | Dropdown | Submenu |
----------- ---------- ----------- ---------
| Dropdown >| Submenu | | Dropdown >| < The submenu is shifting
----------- ---------- ----------- to the top
Where the > shows the drop down item that contains sub menu options.

I made a small change on the .dropdown selector and now it's working:
.dropdown {
position: relative;
float: left;
clear: both;
width: 100%;
}
JSFiddle: https://jsfiddle.net/c71f6qzm/
Hope it helps!

The issue has to do with your display property of your .dropdowns.
if you set the display property to inline-block on those <div>s they should render more correctly. You may have to add width: 100% to your .dropdown CSS and reduce the white space in between each menu item by adding font-size: 0 to .navtwo css, but it works:
Also, Ignacio's float solution, does pretty much the same thing.
Display: block for those <div>s is the problem. floating or displaying as inline is your best solution
#nav {
width: 886px;
height: 32px;
margin: 1px auto 0 auto;
border-top: 1px solid #B1B6B9;
border-bottom: 1px solid #646E73;
background-color: #A9AFB2;
/* 50% gray */
background: -moz-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbbfc1), color-stop(100%, #7f878b));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* IE10+ */
background: linear-gradient(to bottom, #bbbfc1 0%, #7f878b 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ffBBBFC1', EndColorStr='#ff7F878B');
padding: 0 40px;
}
.navone {
position: relative;
top: 0;
left: 0;
height: 32px;
float: left;
margin-bottom: -3px;
z-index: 150;
width: auto;
}
.navone a {
text-decoration: none;
float: left;
height: 16px;
color: #FFFFFF;
font-family: Jabas, Arial, Helvetica, sans-serif;
font-size: 19px;
padding: 5px 14px 11px 14px;
display: block;
border-left: 1px solid #B1B6B9;
border-right: 1px solid #737C81;
text-shadow: -1px -1px 0px rgba(84, 95, 101, .35);
}
.navone a:hover {
text-decoration: none;
background-color: #567697;
/* 75% dark blue */
background: -moz-linear-gradient(top, #567697 0%, #1e4975 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #567697), color-stop(100%, #1e4975));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #567697 0%, #1e4975 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #567697 0%, #1e4975 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #567697 0%, #1e4975 100%);
/* IE10+ */
background: linear-gradient(to bottom, #567697 0%, #1e4975 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ff567697', EndColorStr='#ff1E4975');
}
.navone a.active {
background-color: #89A8C7;
/* 55% blue */
background: -moz-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #89a8c7), color-stop(100%, #5480ad));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* IE10+ */
background: linear-gradient(to bottom, #89a8c7 0%, #5480ad 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ff89A8C7', EndColorStr='#ff5480AD');
}
.navone:hover .navtwo {
display: block;
}
.navtwo {
border-top: 1px solid #65809B;
display: none;
position: absolute;
top: 32px;
left: 0px;
z-index: 200;
width: 100%;
font-size: 0;
-webkit-box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
-moz-box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
}
.navtwo a {
color: #3E6082;
background-color: #D8E2EC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
width: 90%;
height: auto;
display: block;
padding: 4px 5%;
border: 1px solid #B1C5DA;
box-sizing: box-border;
border-top: 1px solid #FFFFFF;
text-shadow: none;
}
.navtwo a:hover {
color: #FFFFFF;
background-color: #3E6082;
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
width:100%;
}
.dropdown > a {
background: #C1C5C7 !important;
color: #32393D !important;
font-weight: bold;
border-top: 1px solid #E0E2E3;
border-bottom: 1px solid #A2A8AB !important;
z-index: 50;
}
.dropdown > a:after {
float: right;
content: "\25B6"
}
.dropdown:hover > a {
background: #92999D !important;
}
.dropdown-content {
display: none;
z-index: 100;
}
.dropdown-content a {
padding: 4px 8px;
width: 150px;
}
.dropdown:hover .dropdown-content {
display: block;
position: absolute;
top: 0;
left: 100%;
}
<div id="nav">
<!--begin of option-->
<div class="navone">
Option
<div class="navtwo">
<!--begin of dropdown menu-->
<div class="dropdown">
Test 1
<!--begin of submenu-->
<div class="dropdown-content">
Test Submenu
Test Long Submenu
Test Longest Submenu
</div>
</div>
<!--begin of dropdown menu-->
<div class="dropdown">
Test 2
<!--begin of submenu-->
<div class="dropdown-content">
Test
Long Test
The Longest Test
</div>
</div>
Test 3
</div>
</div>
<!--end of option-->
<div class="navone">
Longer Option Name
<div class="navtwo">
<div class="dropdown">
Test 1
<div class="dropdown-content">
Test Submenu
Test Long Submenu
Test Longest Submenu
</div>
</div>
Test 2
Test 3
</div>
</div>
</div>
or JSfiddle

Positioning on navbar

I made a navigation bar with some links on it and a header, just like bootstrap, but I'm trying to make it so the account dropdown is on the right side, but when I add the class "pullRight" it moves it to the right but doesn't stay on the navigation bar.
pullright CSS
.pullRight {
float: right;
}
HTML
<ul>
<li><i class="fa fa-comments"></i> Forums</li>
<li><i class="fa fa-trophy"></i> Players</li>
<li><i class="fa fa-shopping-cart"></i> Shop</li>
<li class="pullRight"><i class="fa fa-user"></i> Account</li>
</ul>
Navigation bar CSS
.navigationBar {
width: 100%;
height: 40px;
background: #efefef;
background: -moz-linear-gradient(top, #efefef 50%, #d3d3d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#efefef), color-stop(100%,#d3d3d3));
background: -webkit-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: -o-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: -ms-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: linear-gradient(to bottom, #efefef 50%,#d3d3d3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#d3d3d3',GradientType=0 );
border-bottom: 2px solid #EB7727;
}
.navigationBar ul {
list-style: none;
}
.navigationBar ul li {
width: 100px;
height: 40px;
background: #efefef;
background: -moz-linear-gradient(top, #efefef 50%, #d3d3d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#efefef), color-stop(100%,#d3d3d3));
background: -webkit-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: -o-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: -ms-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: linear-gradient(to bottom, #efefef 50%,#d3d3d3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#d3d3d3',GradientType=0 );
border-bottom: 2px solid #EB7727;
text-align: center;
border-right: 1px solid gray;
display: table-cell;
cursor: pointer;
}
.navigationBar ul li:first-child {
border-left: 1px solid gray;
}
.navigationBar ul li:hover {
border-right: 1px solid gray;
display: table-cell;
width: 100px;
height: 40px;
background: rgb(211,211,211); /* Old browsers */
background: -moz-linear-gradient(top, rgba(211,211,211,1) 0%, rgba(239,239,239,1) 50%, rgba(211,211,211,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,211,211,1)), color-stop(50%,rgba(239,239,239,1)), color-stop(100%,rgba(211,211,211,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */
text-align: center;
cursor: pointer;
}
.navigationBar ul li a ,
.navigationBar ul li a:hover ,
.navigationBar ul li a:active {
line-height: 40px;
color: #000;
text-decoration: none;
font-size: 14px;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
cursor: pointer;
}

hopefully this helps. all i have done is added the float left to all other menu options except accounts... i also added padding 0 to the ul element to remove the leading space before forums..
.navigationBar {
width: 100%;
height: 40px;
background: #efefef;
background: -moz-linear-gradient(top, #efefef 50%, #d3d3d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#efefef), color-stop(100%,#d3d3d3));
background: -webkit-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: -o-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: -ms-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: linear-gradient(to bottom, #efefef 50%,#d3d3d3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#d3d3d3',GradientType=0 );
border-bottom: 2px solid #EB7727;
}
.navigationBar ul {
list-style: none;
padding: 0;
}
.navigationBar ul li {
width: 100px;
height: 40px;
background: #efefef;
background: -moz-linear-gradient(top, #efefef 50%, #d3d3d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#efefef), color-stop(100%,#d3d3d3));
background: -webkit-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: -o-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: -ms-linear-gradient(top, #efefef 50%,#d3d3d3 100%);
background: linear-gradient(to bottom, #efefef 50%,#d3d3d3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#d3d3d3',GradientType=0 );
border-bottom: 2px solid #EB7727;
text-align: center;
border-right: 1px solid gray;
display: table-cell;
cursor: pointer;
}
.navigationBar ul li:first-child {
border-left: 1px solid gray;
}
.navigationBar ul li:last-child {
border-left: 1px solid gray;
}
.navigationBar ul li:hover {
border-right: 1px solid gray;
display: table-cell;
width: 100px;
height: 40px;
background: rgb(211,211,211); /* Old browsers */
background: -moz-linear-gradient(top, rgba(211,211,211,1) 0%, rgba(239,239,239,1) 50%, rgba(211,211,211,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,211,211,1)), color-stop(50%,rgba(239,239,239,1)), color-stop(100%,rgba(211,211,211,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */
text-align: center;
cursor: pointer;
}
.navigationBar ul li a ,
.navigationBar ul li a:hover ,
.navigationBar ul li a:active {
line-height: 40px;
color: #000;
text-decoration: none;
font-size: 14px;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
cursor: pointer;
}
.pullRight{
float:right;
}
.pullLeft{
float:left;
}
<div class="navigationBar">
<ul>
<li class="pullLeft"><i class="fa fa-comments"></i> Forums</li>
<li class="pullLeft"><i class="fa fa-trophy"></i> Players</li>
<li class="pullLeft"><i class="fa fa-shopping-cart"></i> Shop</li>
<li class="pullRight"><i class="fa fa-user"></i> Account</li>
</ul>
</div>
Hopefully this is what you were looking to do...have a gr8 day

pullRight
Should be
.pullRight
In your CSS file

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.