I am having a hard time understanding why there is a small white space next to my webpage. I have checked inspect element and it says the body stops before the white space begins (as in the border of my body is where is want it to be). I am a beginner at writing HTML and CSS so hopefully this will be an easy problem to fix!
HTML:
<!DOCTYPE html>
<html>
<body>
<!--Logo + Social media and login + navbar + search bar-->
<div class="login">
<div class="container-fluid">
<ul class="pull-right">
<li class="loginbutton">Log In</li>
<li>Sign Up</li>
<li></li>
</ul>
<ul class="pull-left">
<li><img class="twitter" src="#"></li>
<li><img class="facebook" src="#"></li>
<li class="pressreleases">Press</li>
</ul>
</div>
</div>
<div class="logo">
<div class="container-fluid">
<img class="logo" src="#" border="0">
</div>
</div>
<div class="nav">
<ul class="navbar">
<li>New</li>
<li>Popular</li>
<li>Database</li>
<li>News</li>
</ul>
</div>
<div class="searchbar">
<div class="container-fluid">
<div class="col-md-12">
<form>
<input class="search" type="text" placeholder="Lookup symbol..." required>
<input name="Submit" class="button" type="submit" value="Search">
</form>
</div>
</div>
</div>
<!-- end Logo + Social media and login + navbar + search bar-->
<div class="frontpage">
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="headliner">
<h3>New releases</h3>
<p>Learn everything you need to know. <p>
<p>Learn more</p>
</div>
</div>
<div class="col-md-3">
<div class="ad1">
<h1>Ad</h1>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="row">
<ul class="top">
<li>About Us</li>
<li>Contact Us</li>
<li>Sitemap</li>
</ul>
</div>
<div class="row">
<ul class="middle1">
<li>Advertise</li>
<li>Investor Relations</li>
</ul>
</div>
<div class="row">
<ul class="middle2">
<li>Application for Internship/Position</li>
</ul>
</div>
<div class="row">
<ul class="bottom">
<li>Privacy Policy</li>
<li>Terms of use</li>
<li>Feedback</li>
</ul>
</div>
<div class="copyright">
<p>2014<p>
</div>
</footer>
</body>
</html>
CSS:
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Logo + navbar
+ login/social media + search bar v
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.logo {
max-width: 280px;
margin-right: auto;
margin-left: auto;
}
.logo img {
width: 150%;
}
.logo .container-fluid {
height:135px;
background-color: #ffffff;
width: 100%;
padding-top:5px;
}
.nav .navbar {
background-color: #40517f;
list-style-type: none;
margin: 5;
padding: 5;
overflow: hidden;
position:relative; bottom:50px;
}
.nav .navbar li {
float: left;
border-style: solid;
border-width: 1px;
border-color: #40517f;
}
.nav .navbar li a{
display: block;
width: 300px;
font-weight: none;
color: #40517f;
background-color: #B4C8E8;
text-align: center;
padding: 14px;
text-decoration: none;
font-family: 'Cabin', sans-serif;
}
.nav .navbar li a:hover {
color: #666666;
background-color: #CAD8EF;
FONT-WEIGHT:none;
font-family: 'Cabin', sans-serif;
}
.login .container-fluid {
background-color: #ffffff;
padding-top:5px;
z-index: 1;
height: 30px;
}
.login .pull-right li {
float: right;
list-style: none;
overflow: hidden;
}
.login .pull-right li a {
display: inline;
padding: 10px;
color: #40517f;
font-size: 14px;
font-family: 'Cabin', sans-serif;
}
.login .pull-right li a:hover {
color: #B4C8E8;
margin-top: 0px;
margin-bottom: 0px;
font-family: 'Cabin', sans-serif;
}
.login .pull-left li {
float: left;
list-style: none;
color: #666666;
font-size: 14px;
position: relative;
right: 50px;
overflow: hidden;
}
.login .pull-left li a {
display: inline;
padding: 10px;
opacity: .8;
font-family: 'Cabin', sans-serif;
}
.login .pull-left .facebook {
width: auto;
height: 20px;
vertical-align: sub;
}
.login .pull-left .twitter {
width: 20px;
height: auto;
vertical-align: sub;
}
.login .pull-left .pressreleases {
right: 3 px;
vertical-align: sub;
font-family: 'Cabin', sans-serif;
}
.searchbar {
background-color:#D1D1D1;
text-align:center;
position:relative;bottom:75px;
border-style: solid;
border-width: 2px;
border-color: #40517f;
}
.search {
width: 250px;
padding:8px 15px;
background-color:#FFFFFF;
border:3px solid #D1D1D1;
color: #666666;
font-family: 'Cabin', sans-serif;
}
.button {
position:relative;
padding:6px 15px;
left:-2px;
background-color:#40517f;
color:#ffffff;
opacity: .6;
font-family: 'Cabin', sans-serif;
}
.button:hover {
background-color:#B4C8E8;
border-color: #B4C8E8;
color:#ffffff;
opacity: 1;
font-family: 'Cabin', sans-serif;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Logo + navbar + ^
login/social media + search bar
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Frontpage v
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.frontpage {
position:relative; bottom:50px;
}
/*
Height and width for all of "frontpage" are just placeholders!
Make sure to get right of them when content is added.
*/
.frontpage .container-fluid .headliner {
background-color: #efefef;
height: 400px;
}
.frontpage .container-fluid .ad1 {
background-color: #efefef;
height: 400px;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Frontpage ^
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Footer v
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
footer {
background-color: #666666;
text-align:center;
}
footer .top {
list-style: none;
color: #478bca;
font-family: 'Cabin', sans-serif;
font-size: 18px;
padding-top:15px;
}
footer .top li {
display: inline;
}
footer .top li:before {
content: " | ";
}
footer .top li:first-child:before {
content: none;
}
footer .middle1 {
list-style: none;
color: #478bca;
font-family: 'Cabin', sans-serif;
font-size: 18px;
}
footer .middle1 li {
display: inline;
}
footer .middle1 li:before {
content: " | ";
}
footer .middle1 li:first-child:before {
content: none;
}
footer .middle2 {
list-style: none;
color: #478bca;
font-family: 'Cabin', sans-serif;
font-size: 18px;
}
footer .middle2 li {
display: inline;
}
footer .middle2 li:before {
content: " | ";
}
footer .middle2 li:first-child:before {
content: none;
}
footer .bottom {
list-style: none;
color: #478bca;
font-family: 'Cabin', sans-serif;
font-size: 18px;
}
footer .bottom li {
display: inline;
}
footer .bottom li:before {
content: " | ";
}
footer .bottom li:first-child:before {
content: none;
}
footer .copyright {
background-color: #666666;
height: 60px;
}
footer .copyright p {
color: #D1D1D1;
padding-top: 10px;
font-size: 12px;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Footer ^
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
You can try adding
body {
margin:0;
}
Add this code at top of css:
html, body {
margin: 0;
padding: 0;
}
see the result:
http://jsfiddle.net/zpq3uxuq/
Enjoy your code!
The div class="row"s in the footer need to have a div class="container" around them.
If you are referring to the white space between the div.frontpage and footer, then check my answer below:
.frontpage {
position: relative;
bottom: 50px;
}
Remove the bottom:50px to resolve the issue.
bottom explanation
UPDATE
In light of the comment from the OP, I've updated my answer:
The issue is related to the negative margin set by the following CSS declaration:
.row {
margin-right: -15px;
margin-left: -15px;
}
Remove the negative margin to resolve the issue.
Related
So for one of my school projects, we have to design a website using Html & CSS and I've encountered a problem where I don't know how to fit 2 logos (left & right) into the corners of my footer. I've tried to change the position, float, width etc and it doesn't seem to work, the logo always seems to not go in the place I want it to be. Sorry if this sounds amateur as I've only started doing Html & CSS a few weeks ago.
This is the current image where the logo is below my ul's and is in the incorrect position. -
This is what I want the footer to look like, it would be great to have the text on the left "Sponsored by HP omen gaming" to be a image as I may swap it out with another logo in the future. -
Thanks to anyone in advance who may be able to solve this problem for me, below would be my html & CSS code.
.footer {
background-color: #035642;
margin-top: 10px;
height: 60px;
color: #efe5d0;
text-align: center;
padding: 15px;
font-size: 100%;
font-family: Arial;
display: block;
}
.footer ul {
padding: 5px;
list-style-type: none;
text-align: center;
margin: 10px;
overflow: hidden;
}
.footer li {
text-decoration: none;
text-align: center;
font-family: arial;
font-weight: bold;
list-style-type: none;
display: inline-block;
}
.footer ul li {
display: inline-block;
}
.footer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #efe5d0;
background-color: #5c755e;
text-align: center;
font-family: arial;
font-weight: bold;
}
.footer ul li a:hover {
color: #000;
background-color: #fff;
}
#footer-right {
height: 50px;
width: auto;
position: fixed;
float: right;
}
<div class="footer">
<li>WBHS ESPORTS</li>
<ul>
<li>Facebook</li>
<li>|</li>
<li>YouTube</li>
<li>|</li>
<li>Twitch</li>
</ul>
<img src="hp-omen-logo.png" id="footer-right">
</div>
Try look into flexbox. Here's a quick template to do what you want.
.footer {
display: flex;
justify-content: space-between;
}
.center {
text-align: center;
}
<div class="footer">
<p>Left</p>
<div class="center">
<p>Some text</p>
<p>Your list</p>
</div>
<p>Right</p>
</div>
I think a solution can be the use of display:flex
And to be more clean try to use also the widgets, you can see in this example how it works.
.footer {
background-color: #035642;
margin-top: 10px;
height: 60px;
color: #efe5d0;
text-align: center;
padding: 15px;
font-size: 100%;
font-family: Arial;
display: block;
}
.footer ul {
padding: 5px;
list-style-type: none;
text-align: center;
margin: 10px;
overflow: hidden;
}
.footer li {
text-decoration: none;
text-align: center;
font-family: arial;
font-weight: bold;
list-style-type: none;
display: inline-block;
}
.footer ul li {
display: inline-block;
}
.footer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #efe5d0;
background-color: #5c755e;
text-align: center;
font-family: arial;
font-weight: bold;
}
.footer ul li a:hover {
color: #000;
background-color: #fff;
}
#footer-right {
height: 50px;
width: auto;
position: fixed;
float: right;
}
/*my-edit*/
#the-footer{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
height: auto;
margin: 0;
padding: 10px;
}
#the-footer .widget{
width: 30%;
}
#the-footer .widget.left{
text-align: left;
}
#the-footer .widget.right{
text-align: right;
}
#the-footer .widget.center{
text-align: center;
}
#the-footer .widget .title{
font-weight: bold;
letter-spacing: 2px;
}
#the-footer .widget .logo-link{
color:#fff;
display: inline-block;
text-decoration: none;
max-width:150px;
}
#the-footer .widget .logo-link:hover{
color:#000;
}
<div class="footer" id="the-footer">
<div class="widget left">
<a class="logo-link" href="#" target="_blank">Sponsored by HP omen gaming</a>
</div>
<div class="widget center">
<div class="title">WBHS ESPORTS</div>
<ul class="footer-nav">
<li>Facebook</li>
<li>|</li>
<li>YouTube</li>
<li>|</li>
<li>Twitch</li>
</ul>
</div>
<div class="widget right">
<a class="logo-link" href="#" target="_blank"><img class="logo-footer" src="https://via.placeholder.com/60" alt="logo"></a>
</div>
</div>
You can use the display: grid property so you can separate your footer into 3 parts
You can learn about the grid property here: https://www.w3schools.com/css/css_grid.asp
Please help, I need the white space on the right bar gone and the position of the main content placed at the middle of the page.
What should I do? Any suggestion?
This is my site : http://www.plebonline.co.uk
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
.leftbar {
float: left;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.rightbar {
float: right;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.maincontent {
padding: 0;
float:left;
margin-left: 10%;
margin-right: 10%;
background-color: #ff00ff;
width: 80%;
}
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
There is a div tag close without opening that may be causing the problem.
Change:
<div class="leftbar"></div>
<div class="maincontent"></div>
</div>
<div class="rightbar"></div>
To:
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
I notice that you didn't put your rightbar and leftbar in any div. In my code here, I remove the right and left bar. You can adjust the code if you want them back.
It's better to add some container to hold all of your element. As you notice the header and the maincontent is inside the div class .container.
Hope this help.
html,body {
margin:0;
padding:0;
height: 100%;
/*
* The container which hold the header and the main content
*/
.container {
width:100%;
position: absolute;
height:1200px;
background:#333;
}
/*
* Header which contain your menu and date
*/
.header {
width:100%;
}
/*
* The main content of your site
*/
.maincontent {
width:80%;
max-width:1000px;
background-color: #fff;
float:left;
left:50%;
height:100%;
margin-left:-500px;
position: absolute;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
</style>
<body>
<div class="container">
<div class="header">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
</div>
<div class="container">
<div class="maincontent">
<h1>This is the content</h1>
</div>
</div>
</body>
I've made a website for a school project and want to improve the design a little more. I think the logo makes the header a little bit to big. So I want to move my navbar from under the header to inside the header, to make it look smaller. That's all. I'll post the code and photos underneath.
This is how it looks now
How I want it to be
/* -----------------------
Layout
------------------------*/
.container {
max-width: 70em;
margin: 0 auto;
}
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
}
.header-heading {
margin: 0;
max-width: 300px;
margin-left: 400px;
max-height: 300px;
}
.nav-bar {
background: #e9f1f1;
padding: 0;
}
.content {
overflow: hidden;
padding: 1em 1.25em;
background-color: #fff;
}
.main,
.zijkant {
margin-bottom: 1em;
}
.footer {
color: #fff;
background: #656565;
padding: 1em 1.25em;
}
/* -----------------------
Navbar
------------------------*/
.nav {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Open Sans Condensed', sans-serif;
}
.nav li {
display: inline;
margin: 0;
}
.nav a {
display: block;
padding: .7em 1.25em;
color: #black;
text-decoration: none;
border-bottom: 1px solid gray;
}
.nav a:link {
color: black;
}
.nav a:visited {
color: black;
}
.nav a:focus {
color: black;
background-color: white;
}
.nav a:hover {
color: black;
background-color: #eededb;
}
.nav a:active {
color: white;
background-color: #f4ebe9;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<link rel="stylesheet" href="etc/css/styles.css">
</head>
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "-20%"
}
</script>
<body onload="zoom()">
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
</html>
Put the image container and navbar in the same container:
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
Give the header position relative and the position the navbar using absolute positioning:
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
position: relative;
}
.nav-bar{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 50px;//adjust to center vertically
width: 300px;//adjust to your liking
}
You have to set a height to nav-bar in order to make sure it is centered vertically
I was just continuing with making this website and all of a sudden some of my navbar padding goes 'missing' and I can't seem to pinpoint the mistake. I've already played the detective game and commented out some of the stuff I thought was interfering. Luckily I have an original picture before the screw-up and one after. Some of the 'paragraph text' will be 'placeheld' for personal reasons and I think it's irrelevant, unless it's needed in order to fix the problem.
-Thanks.
Before and after picture: http://imgur.com/a/ts1FS
Code:
CSS:
body {
background-color: #1a1a1a;
color: #ccad00;
line-height: 1.9;
font-size: 19px;
}
p.desc{
text-indent: 50px;
}
h1 {
font-family: courier;
color: #ccad00;
}
h2 {
font-family: courier;
color: #ccad00;
text-align: center;
}
#divtitle {
width: 50%;
margin:auto;
padding-top: 50px;
text-align: center;
}
h2
{
font-family:courier;
color: #99cc00;
}
p {
line-height: 1.9
text-size: 19px;
}
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #ccad00;
height:40px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #f2f2f2;
background-color: #ccad00;
float: left
}
#nav li a:hover {
color: #0d0d0d;
background-color: #35af3b;
}
.button {
background-color: #ffa600;
border: none;
color: #998200;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
font-family: courier;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: white;
color: #998200;
}
div#containerbttn {
width: 800px;
height: 100px;
margin: auto;
background-color: green;
}
ul.square{
list-style-type: square;
}
.center {
text-align: center;
}
html:
<div id="nav">
<ul>
<li>Home
</li>
<li>Center
</li>
<li>Rules
</li>
<li>References
</li>
<li>Rankings
</ul>
</div>
<div>
<div id="divtitle" >
<h1> text </h1>
</div> -->
<div id="containerbttn">
<button class="button">GET STARTED!</button>
<button class="button">FAQ</button>
<button class="button">RANKINGS</button>
</div>
<h2> Synopsis: </h2>
<div class="center">
<p class="desc"> Welcome to ***!. This is a free...
<ul class="square">
<li> some text </li>
<li> some text </li>
</ul>
<p class="desc" > text </p>
</div>
</html>
Your problem exists because you have set the height of the #nav element to 40 px. When you add the padding to your a element, you make it larger than the ul element. This can be solved easily by updating two lines of code.
First, remove from css:
#nav{ height:40px; }
Then, add to html after ul but before closing the nav div:
<div style="clear:both;"></div>
Here is a jsfiddle of your working page: https://jsfiddle.net/8o279n5r/
And here is a great answer on what the clear property does: What does the CSS rule clear: both do?
I've never seen anything stupid like that, or may be it's 2:30 am and I am hallucinating. I've made simple anchor links within the header and I am completely unable to click on them. They are just plain text and are completely non-clickable.
I'll be thankful if you can give me a hint as what/where I am not obeying the HTML/CSS daemon.
HTML
<header>
<div class="confine">
<div class="complete-head-content">
<div class="left-width-less logo-width">
<img src="./imgs/twit-logo.png" />
</div>
<div class="right-width-less">
<div class="top-header-content">
<h1 class="pres-title">Defining Twisted Strategy</h1>
</div>
<div class="lower-header-content">
<div id="navcontainer">
<ul>
<li>Meet the Hobos</li>
<li>Why me?</li>
<li>Our Work in Oblivion</li>
<li>Our Perspective</li>
<li>Our Approach</li>
</ul>
</div>
</div>
</div>
<div class="c"> </div>
</div>
</div>
</header>
<div id="contend">
... ... ...
CSS
a {
color: #EA2E49;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #EA2E49;
cursor: pointer;
}
header {
height: 50px;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
z-index: 1;
}
.complete-head-content {
width: 100%;
background-color: #a0c654;
height: 130px;
}
.left-width-less {
float: left;
background-color: #fff;
width: 15%;
text-align: center;
height: 130px;
vertical-align: middle;
}
.left-width-less img {
width : 76px;
height: 100px;
margin-top: 10px;
}
.right-width-less {
float: right;
width: 85%;
}
.top-header-content {
width: 100%;
height: 70px;
background: #437b3c url("../imgs/presentation-title-bg.jpg") no-repeat right;
}
.lower-header-content {
width: 100%;
height: 70px;
}
.logo {
cursor: pointer;
}
/* Navigation */
#navcontainer {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
text-transform: uppercase;
margin-top: 19px;
}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1.7em;
color: #fff;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
EDIT
Thanks to Nikhil, the had a Z-index:1 which when removed fixed the bug.
Thanks.
Unless you left something out. it is working for me with and without css.
Tested in IE 8
How did you include the CSS btw?
The <div id="contend"> right next to tag had a z-index:1. This made every link in <header> tag non-clickable.
The solution was to remove the z-index property.
Hope it helps someone.