I searched this and toyed with the Z-Axis stuff, but to no avail.
Basically, my nav bar has submenus that appear underneath the div below it. That div has an opacity thing going on, which must have something to do with it. I need these to display above the div!!
JS Fiddle: http://jsfiddle.net/Peege151/7gGJp/1/
I'd ask to expand your browser so the nav bar is all on one line.
Here is my HTML Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" type="text/css" rel="stylesheet" />
<title></title>
</head>
<body style="overflow-x: hidden;scrolling:no;">
<div id="header">
<div id="searchcontainer">
<div id="searchlinks">
<p>Full Suite of Services | Contact Us</p>
</div>
<div id="searchform">
<form action ="##">
Search Site: <input type="search" style="border-radius: 10px;">
<input type="image" src="images/search.png" style="height:20px; width:20px; position:relative;top:5px;">
</form>
<br>
</div>
</div>
<div id="navbar">
<ul id="nav">
<li> Home </li>
<li>Services
<ul>
<li> Full Suite of Services </li>
</ul>
</li>
<li> Case Studies
<ul>
<li> Thing1 </li>
<li>Thing2 </li>
<li> Thing3 </li>
</ul>
</li>
<li>Partners
<ul>
<li> Guy1</li>
<li> TOP HALF OF NAME!!! OMG </li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="division"></div>
<div id="intro" class="overlay">
</div>
<div id="biocontactwrap">
<div id="biotext"></div>
<div id="contact_pat"> </div>
</div>
<div id="quote">
</div>
<?php
// put your code here
?>
</body>
</html>
Here is my CSS:
/*
Document : style
Created on : Nov 12, 2013, 11:51:06 AM
Author : ShiftedRec
Description:
Purpose of the stylesheet follows.
*/
body {
background-image: url(images/wall1.gif);
width:100%;
margin:0;
padding:0;
overflow-x:hidden;
}
root {
display: block;
}
#header {
height:150px;
width:100%;
clear:both;
overflow:hidden;
}
#searchcontainer{
width:305px;
height:60px;
float:right;
position:relative;bottom:20px;
}
#searchlinks {
clear:right;
float:right;
width:300px;
position:relative;top: 10px; left:80px;
font-size:50%;
}
#searchlinks a{
font-size:50%;
}
#searchform {
float:right;
clear:left;
width:300px;
clear:left;
}
.clear{
clear:both;
}
#navbar {
float:right;
margin-right:10%;
width:50%;
text-align: right;
clear:right;
}
#navbar ul{
padding: 0 10px;
list-style: none;
position: relative;
display: inline-table;
overflow:visible;
}
#navbar ul li {
position:relative;
display: inline-block
}
#navbar ul ul{
display:none;
position:absolute;
top:1em;
left:0
}
#navbar ul > li:hover ul {
display:inline-table;
margin:0;
overflow:visible;
z-index: 4;
}
#navbar ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#navbar ul li ul li {
display:block;
}
#navbar li {
display: inline-block;
margin: 10px;
white-space: nowrap;
}
#division {
height:15px;
background-color:#9E0000;
overflow:visible;
}
#intro{
height:200px;
width:100%;
z-index: 1;
}
#biocontactwrap {
width:100%;
height: 600px;
margin-bottom: 10px
}
.overlay {
z-index: 1;
height: 100%;
width: 100%;
position: relative;top:300px;
overflow: auto;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .1); /*can be anything, of course*/
box-shadow: 0px 9px 9px rgba(0,0,0.9,0.95);
}
#biotext {
margin-left:15%;
width:40%;
height:100%;
padding:0px;
border: solid blue;
float:left;
}
#contact_pat{
width:25%;
height:100%;
border: solid yellow;
float: right;
margin-right:15%
}
#quote {
width:100%;
background-color:blue;
height: 300px;
}
Thanks so much guys! Please be nice. I'm a noobie!
EDIT
One problem causes another!
The reason I had done overflow in the header was because even though I had width:100% there was a scrollbar at the bottom of the page (horiz) that would allow me to scroll over to empty space.
When I had overflow:hidden; in the header, that solved that problem but then hid my nav bar submenus.
I tried to do overflow-x:hidden; overflow-y:visible, but having the Y-visible combined with the X-hidden I guess is bugged and it just reads as "auto!"
Anyway to have both NO X scroll and NO hidden Y submenu's?
Thanks guys..
It happens because of the overflow: hidden; in the #header. Remove it and the navigation will be displayed.
Related
I am new to css my dropdown menu is hiding behind the div please help me to find out the problem. my HTML and CSS code is:
<style>
*
{
margin:0px;
padding:0px;
}
body
{
background-color:mintcream;
}
#header
{
height:260px;
width:auto;
margin:5px;
}
#headerimg
{
height: 260px;
width:100%;
}
#wrap #menu
{
width:550px;
margin:0 auto;
padding:10px;
}
#wrap
{
height:50px;
background-color:lightsalmon;
border:1px solid white;
border-radius:5px;
}
#wrap #menu ul li
{
background-color:black;
border-radius:5px;
width: 120px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
list-style-type:none;
margin-left: 3px;
}
#wrap #menu ul li a{
color:white;
text-decoration:none;
display:block;
}
#wrap #menu ul li a:hover
{
background-color:mistyrose;
color:orangered;
border-radius:5px;
}
#wrap #menu ul li ul li
{
display:none;
}
#wrap #menu ul li:hover ul li
{
display:block;
}
#content
{
width:100%;
height:500px;
background-color: teal;
margin:5px;
}
#content1
{
width:50%;
height:500px;
background-color: yellow;
float:left;
}
#content2
{
width:50%;
height:500px;
background-color:red;
float:left;
}
</style>
<body>
<div id="header">
<img id="headerimg" src="doc.jpg" />
</div>
<div id="wrap">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Services
<ul>
<li>Food</li>
<li>Hospital</li>
<li>Medical</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="content1"> </div>
<div id="content2"> </div>
</div>
</body>
I am new to css. My dropdown menu is hiding behind the div. Please help me to find the problem.
Please add below css
ul {position: relative; z-index: 99999; }
Just add position:relative in "#wrap #menu ul li" . I think your problem was solved. If you have any other problem then put it here.
Thanks for asking.
So I've been trying to work on my website creation skills and was reading various tutorials concerning html/css developing. The problem I now have run into is that when I alter the size of my page the view gets incredibly altered. I was under the assumption that when the view changed it would keep it's structure but have a smaller view window (not the case).
Does the problem lie with me using percent values instead of pixels? Is there a better way to structure my design to make it responsive to window size alterations?
This is my HTML
<html>
<html lang="en">
<head>
<title> MyWebsite</title>
<link rel="stylesheet"type="text/css" href="style.css">
</head>
<body>
<div id="containerColumn1">
<div id="Fill1"> </div>
</div>
<div id="containerTopLogo">
<div id="FillTopLogo"> </div>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Services <span class="arrow">▼</span>
<ul class="sub-menu">
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>
</ul>
</li>
<li>
Services2 <span class="arrow">▼</span>
<ul class="sub-menu">
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>
</ul>
</li>
<li> Contact Us</li>
<li> Site Map</li>
</ul>
</nav>
</div>
<div id="containerPicture">
<div id="headerPicture"> </div>
</div>
<div id="container">
<div id="header"> </div>
</div>
<div id="containerColumn2">
<div id="Fill2"> </div>
</div>
</body>
</html>
This is my style.css
body {
background: #FFFFFF url('body-bg.jpg');
}
.clearfix:after {
display:block;
clear:both;
}
/*COLUMNS TO CENTER PAGE*/
#containerColumn1 {
width:18.2%;
margin-top: 0%;
margin-left: 0%;
padding: 0;
border: 5px groove #000;
}
#Fill1 {
background: red;
height:100%;
}
#containerTopLogo {
width:61.3%;
margin-left:18.4%;
margin-top:-47.4%;
height:23%;
position: absolute;
border: 5px groove #000;
}
#FillTopLogo {
background: green;
height:100%;
}
#containerColumn2 {
width:18%;
margin-top: -49.82%;
margin-left: 80%;
height:100%;
position:absolute;
padding: 0;
border: 5px groove #000;
}
#Fill2 {
background: red;
height:100%;
}
/*Menu Outline*/
.menu-wrap {
width:50%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
background:#000000;
}
/* Height of menu (Home)(*MARGIN*) AND LEFT-RIGHT PLACEMENT(*WIDTH*)*/
.menu {
width: 61.5%;
margin:0%;
position: absolute;
left:19%;
top: 25%;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.menu li{
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#000000;
}
.menu li a:hover > a .menu .current-item a{
color:#FFF000;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/* Top of the Page */
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
/* Menu Item spacing (Vertical/Horizontal) */
.menu > ul > li > a {
/* Menu Spacing Vert/Hor */
padding:10px 30px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a{
background:#FFFFFF;
}
/* Bottom Level */
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:100%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background:#FFFFFF;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a{
background:#FFFFFF;
}
/*END OF MENU TOOLBAR*/
#containerPicture {
width:62%;
margin-top: -31.7%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#headerPicture {
background: yellow;
height:20%;
}
#container {
width: 62%;
margin-top:-0.5%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#header {
background: blue;
height: 50%;
}
I would like to state that I have used a drop down menu provided by Seb Kay. His website: http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css. I only state this as a reference so that he is at least acknowledged for his craftsmanship.
Your problem comes from the vertical margin and padding rules in your css. This is a little counterintuitive but this rules, when defined with percentage, doesn't take as reference the height, but instead they take the width as reference, so all 4 margins are equal. Example:
If you have: margin: 5%, the top and left margin are the same and they don't depend on the height of the conteiner for the top and bottom margins and the with for the right and left.
For padding it is the same.
So, my solution: if you don't really need a percentage layout, I recomend you to use ems for the vertical margins and paddings. Otherwise, if you need to mantain proportions, you can use vh units. The vh units are like a percentage that refers not to the height of the parent but the height of the window, so it is great to mantain proportions on a page when you want to avoid scrolling and yet keep percentage.
i am using ul an li as menu list.I am able to change color of menu item in hover and visited link but on active state color is not changing, would you tell me what could be the solution for that problem?
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chandan</title>
<link rel="shortcut icon" href="../Resources/favicon.png" />
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="menu_line">
<img src="../Resources/Logo.png" alt="logo" id="logo">
<ul>
<li value="home"><b>Home</b></li>
<li value="services"><b>Services</b></li>
<li value="portfolio"><b>Portfolio</b></li>
<li value="blog"><b>Blog</b></li>
<li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>
</li>
</ul>
</div><!--menu line end here-->
</div><!--header end here-->
</div><!--container end here-->
</body>
</html>
#css FIle*
#charset "utf-8";
/* CSS Document */
#logo
{
margin:0 auto;
float:left;
height:55px;
width:60px;
margin-top:0px;
margin-left:0px;
}
ul
{
margin:17px auto;
float:right;
}
li
{
list-style-type:none;
display:inline;
display: inline-block;
padding-left: 25px;
}
.menu_line{
margin:0 auto;
margin-top:60px;
margin-left:120px;
height:55px;
width:730px;
float:left;
border-style: solid;
border-width: 2px;
}
.container {
margin: 0px auto;
width: 998px;
background-position:center;
}
.header
{
margin:0 auto;
background-color:#f82424;
margin-top:-8px;
margin-left:-8px;
height:660px;
width:1007px;
background-position:center;
}
li a
{
color:#fcb1b1;
text-decoration:none;
}
li a:hover
{
color:#fff;
text-decoration:underline;
}
li a:active
{
color:#fff;
text-decoration:underline;
}
This might help
#menu_line .active a {
background-color:#FFD700;
}
here is my solution in css :
I have edited your code at styles and menu items
simply you must set class="active" to each li element you want to show active
I have added the class="active" to the service menu item.
HTML
<div class="container">
<div class="header">
<div class="menu_line">
<img src="../Resources/Logo.png" alt="logo" id="logo">
<ul>
<li value="home"><b>Home</b></li>
<li value="services" class="active" ><b>Services</b></li>
<li value="portfolio"><b>Portfolio</b></li>
<li value="blog"><b>Blog</b></li>
<li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>
</li>
</ul>
</div><!--menu line end here-->
</div><!--header end here-->
</div><!--container end here-->
CSS
#logo
{
margin:0 auto;
float:left;
height:55px;
width:60px;
margin-top:0px;
margin-left:0px;
}
ul
{
margin:17px auto;
float:right;
}
li
{
list-style-type:none;
display:inline;
display: inline-block;
padding-left: 25px;
}
.menu_line{
margin:0 auto;
margin-top:60px;
margin-left:120px;
height:55px;
width:730px;
float:left;
border-style: solid;
border-width: 2px;
}
.container {
margin: 0px auto;
width: 998px;
background-position:center;
}
.header
{
margin:0 auto;
background-color:#f82424;
margin-top:-8px;
margin-left:-8px;
height:660px;
width:1007px;
background-position:center;
}
li a,
li a:hover,
li a:active {
color:#fff;
text-decoration:underline;
}
li.active a,
li.active a:hover,
li.active a:active {
background: #323637;
}
so below is all the code that makes the picture you see at the bottom. I'm trying my best to make this site responsive, but the main problem right now is that the menu bar is not centered (vertically) with the logo to the left. How can I get it to be centered there? I tried setting the top to 50% and it stayed where it is. Now the background color red is only containing the menu bar for some reason even though the logo should be inside of it. Thanks for any help.
HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bond Solutions | Home</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="menubar.css" />
<script type="text/javascript">
var video;
window.onload = function () {
window.video = document.getElementById("video");
window.video.addEventListener('ended',myHandler,false);
window.video.volume=0.5;
}
function myHandler() {
window.video.currentTime = 7;
window.video.volume=0;
window.video.play();
}
</script>
</head>
<body>
<center>
<div id="site">
<div id="header">
<img class="logo" src="images/logo.svg" />
<div id="menu">
<ul id="menu-bar">
<li class="active">Home</li>
<li>Products
<ul>
<li>Stock Photos</li>
<li>Stock Videos</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Computer Repair</li>
<li>Computer Cleaning</li>
<li>Custom Computers</li>
<li>Retro Console Refurbishing</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</center>
</body>
</html>
CSS:
body {
background-color: #000;
}
#site {
background-color:#0F0;
width:75%;
}
#header {
position:relative;
background-color:red;
height:50%;
width:100%;
}
.logo {
width:auto;
max-width:100%;
height:auto;
float:left;
}
#menu {
top:50%;
}
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul{
background: #AC2828;
background: linear-gradient(top, #AC2828 0%, #A31010 100%);
background: -moz-linear-gradient(top, #AC2828 0%, #A31010 100%);
background: -webkit-linear-gradient(top, #AC2828 0%,#A31010 100%);
box-shadow: 0px 0px 8px #A31010;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
#menu ul li {
float: left;
border-right:1px solid #8A0000;
}
#menu ul li:last-child{
border-right:none;
}
#menu ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #811919 0%,#680000 40%);
}
#menu ul li:hover a {
color: #fff;
}
#menu ul li a {
font-family: 'Pathway Gothic One', sans-serif;
font-size:14px;
display: block;
padding: 14px 40px;
color: #fff; text-decoration: none;
}
#menu ul ul {
background: #811919; border-radius: 0px; padding: 0;
position: absolute;
}
#menu ul ul li {
float: none;
border-top: 1px solid #680000;
border-bottom: 1px solid #8F3333;
position: relative;
}
#menu ul ul li a {
padding: 14px 40px;
color: #fff;
}
#menu ul ul li a:hover {
background: #AC2828;
}
Picture:
To make the logo fit in the header properly, you need to add clearfix to the header.
<div style="clear:both;"></div>
Add it just before the ending </div> of header.
Then to make it align at middle:
#header {
position:relative;
background-color:red;
height:50%;
display: table;
width:100%;
}
#menu {
display: table-cell;
vertical-align: middle;
}
DEMO
I wonder if someone can help me. This is my first site, and although I have tried to solve as many problems for myself as I can, I have reached a point where I am staring at the screen dribbling at the mouth hitting the refresh key hoping by magic it will resolve itself.
The problem is that although the site seems to work fine in FF, Chrome and IE9+, in versions of IE8 and below, the horizontal navigation bar is invisible. There is a gap where it should be, and the links do work, but the sprite images are not visible.
This site is not yet online so unfortunately I cant give you a link to it, only code.
I do apologise if there is a glaringly obvious and simple answer that Ive been too stupid to spot.
Thankyou for your time.
Jon
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Alan J. Warde Chartered Surveyor</title>
</head>
<body id="home">
<div id="wrap"><!--wrap starts-->
<img src="images/header.jpg" alt="header" />
<ul id="nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
<div id="main_content"><!--start of main_content-->
<div id="sidebar"><!--start of sidebar-->
<div class="listbox"><!--start of listbox-->
<div class="inner_sidebar">
<ul>
<li>Building Surveys</li>
<li>Valuations</li>
<li>Structural Engineering</li>
<li>Quantity Surveying</li>
<li>Loss Adjusting</li>
</ul>
</div><!--end of inner_sidebar-->
</div><!--end of listbox-->
</div><!--end of sidebar-->
<div id="homecontent"><!--start of Homecontent-->
<div id="inner_content"><!--start of inner_content-->
<h1>A J Warde Chartered Surveyor</h1>
<p>CONTENT</p>
<div id="contact"><!--start of contact-->
<p><img src="images/phone1.png" alt="phone" style="float:left;" />CONTENT</p>
</div><!--end of contact-->
</div><!--end of inner_content-->
</div><!--end of Homecontent-->
</div><!--end of main_content-->
<div id="footer">
<div id="footer_inside">
Registered Company 055012
<ul id="footer_nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
</div><!--end of Footer-inside-->
</div><!--end of footer-->
</div><!--wrap ends-->
</body>
</html>
#charset "utf-8";
/* CSS Document */
/*RESETS AND BASIC SETUP*/
* {margin:0; padding:0;}
html {overflow-y:scroll; overflow: -moz-scrollbars-vertical; }
body {
font: 62.5% "Times New Roman", Times, serif;
background-color: #322e2e;
}
/*TYPOGRAPHY*/
h1 {
padding:10px 0 20px 0;
text-align:center;
font-size:2.4em;
color:#003399;
text-shadow:1px 1px #69F;
}
h2 {
padding:5px 0 5px 0;
text-align:center;
font-size:1.1em;
color:#003399;
text-shadow:1px 1px #69F;
}
/*BASIC ELEMENT STYLING*/
ul {list-style:none inside;}
p {font-size:1.8em; line-height:1.2em; margin-bottom:1.2em; font-weight:bold; color:#333;}
a {outline:none;}
a {text-decoration:none;}
a img {border:none;}
/*END RESET*/
/*STRUCTURE AND THINGS*/
#wrap {
width:995px; /*for IE*/
margin:auto;
background:url(images/content.jpg)repeat-y;
}
html>body #wrap { /*IE hack*/
width:975px;
}
#main_content {
padding:0;
}
#homecontent {
background:url(images/contentimg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#servicescontent {
background:url(images/servicesnewbg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#inner_content {
padding:20px;
position:relative;
}
#contact { /*this is just to centre-align the contact details on home page*/
position:absolute;
left:150px;
width: 330px;
text-align:center;
}
#contact p {
color:#0000FF;
}
#left_col {
border:1px solid red;
float:left;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
margin-top:20px;
position:relative;
}
#contactdetails {
position:absolute;
left:50px;
}
#sidebar {
float:left;
background:url(images/sidebar.jpg) no-repeat;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
}
.inner_sidebar {
padding:20px 0 80px 0px;
font-size:1.4em;
}
.listbox {
width:230px;
margin-left:10px;
}
.inner_sidebar ul li {
font-size:1.4em;
padding:5px;
margin:5px 0 45px 5px;
font-weight:bold;
color:#FFF;
border:1px solid #FFF;
border-radius:3px;
background-color:rgba(0, 0, 25, 0.5);
}
/*TOP OF PAGE NAVIGATION*/
ul#nav {
}
ul#nav li {
display:inline;
}
ul#nav li a {
display:block;
height:54px;
text-indent:-9999px;
float:left;
}
ul#nav li.home a {
width:404px;
background:url(images/homenav.jpg)top center no-repeat;
}
ul#nav li.about a {
width:160px;
background:url(images/aboutnav.jpg)top center no-repeat;
}
ul#nav li.services a {
width:160px;
background:url(images/servicesnav.jpg)top center no-repeat;
}
ul#nav li.contact a {
width:251px;
background:url(images/contactnav.jpg)top center no-repeat;
}
ul#nav li a:hover {
background-position: center center;
}
body#home li.home a, body#about li.about a, body#services li.services a, body#contact li.contact a {
background-position: bottom center;
}
/*FOOTER*/
#footer {
height:96px;
background:url(images/footer.jpg) no-repeat;
clear:both;
}
#footer_inside {
text-align:center;
width:500px;
margin:auto;
padding:10px 0 0 0;
color:#CCCCCC;
font-size:1.4em;
}
ul#footer_nav li {
display:inline;
padding:0px;
margin:0px;
}
ul#footer_nav li a {
color:white;
text-decoration:none;
padding:0 10px;
border-right:1px solid white;
line-height:25px;
}
ul#footer_nav li:last-child a { /*last child selector to remove last border seperator*/
border:none;
}
Looks like you need to put spaces between the url() and top on each background property.
Lower version IEs have 'hasLayout' attribute that is only in IE.
You could find out about it.
ul#nav {
/* set width and height */
}
I think this might works.