Whenever I resize my screen, everything on screen stays where it is and a scroll bar appears... except for the my horizontal list. It keeps moving along with the screen and then becoming multiple layers and messing up. Is there a way for me to keep the list from moving? Previously I tried adding {white-space: nowrap} to the #primary_nav_wrap ul item. However, this then causes the drop down under "committee" to become a horizontal drop down rather than a vertical drop down menu. Is there a way to simply make the entire list not move and an the same time not cause the drop down to change? Could I just affect the parent and not the child?
Here's the CSS
#topbar{
background-color: #636363;
height:2.4em;
position:absolute;
width:81.8em;
margin: auto;
top:0;
}
#topbar2{
background-color: #636363;
height:2.4em;
position:absolute;
width:81.8em;
margin:auto;
top:10em;
z-index:-1;
}
#title{
font-family:basic title font;
color:#ffffff;
position: absolute;
top:-0.6em;
font-size:1.6em;
left:17.4em;
z-index:1;
white-space: nowrap;}
#logo {
position:absolute;
top:2.6em;
left:36.5em;
z-index:1;
width:9em;
}
#text
{font-family:basic title font;
color:#636363;
position: absolute;
left:8em;
top:0.2em;
font-size:4em;
min-width:100%
z-index:1;}
#text2
{font-family:basic title font;
color:#636363;
position: absolute;
left:11.6em;
top:0.2em;
font-size:4em;
z-index:1;}
body {
color: #fff;
font-family: 'open sans';
font-size: 1.1em;
text-align: center;
text-decoration:none;
font-weight:100;
display:inline;
overflow-x:none;
overflow-y: scroll;
}
#primary_nav_wrap
{
margin-top:15px
z-index:100;
}
#primary_nav_wrap ul
{
list-style:none;
position:absolute;
float:left;
margin:0;
top:10em;
left:7em;
padding:0;
text-align:center;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family: 'open sans';
font-weight:100;
font-size: 0.9em;
color: #ffffff;
text-align:center;
padding-top:0.3em;
padding-bottom:0.3em;
padding-right:4em;
padding-left:4em;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
display: inline-block;
float: none;
margin: 0 -3px 0 0;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0%;
text-align:left;
background-color:#636363;
z-index:100;
}
#primary_nav_wrap ul ul li
{
float:none;
width:187px;
padding-left:1em;
padding-right:1em;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
.hvr-fade {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
box-shadow: inset 0 2px 10px -5px #000000;
background-color: #2098d1;
color: white;
z-index:1
}
#bottomtext {
position:absolute;
bottom:-83%;
left:43%;
font-family:"myriad pro";
font-weight:300;
color:black;
font-size:0.8em;
z-index:10000;}
#bottomtext2 {
position:absolute;
bottom:-89%;
left:44%;
font-family:"myriad pro";
font-weight:200;
color:black;
font-size:0.6em;
z-index:1000000}
#bottom {
width:100%;
height:15%;
background-color: white;
position:absolute;
bottom:-88%;
z-index:1000;
}
And HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" type="text/css" href="execs2.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="robots" content="all,index,follow" />
<title>KAS</title>
<meta name="description" content="Create a sticky navigation bar that remains fixed to the top after scroll" />
</head>
<body bgcolor="#F0F0F0">>
<p id="title">SOUTHERN TAIWAN MODEL UNITED NATIONS</p>
<p id="intro"></p>
<p id="text">20 </p>
<p id="text2">15 </p>
<p id="bottomtext">Kaohsiung American School <br>
www.kas.tw </p>
<p id="bottomtext2">(c) 2015 by STMUN PRESS TEAM</p>
<div id="bottom"></div>
<img id="logo" src="images/logo2.png">
<div id="topbar"></div>
<div id="topbar2"></div>
<div id="midbar2"></div>
<div id="midbar3"></div>
<div id="bar"></div>
<div id="bar2"></div>
<div id="box"></div>
<div id="textbox"></div>
<nav id="primary_nav_wrap">
<ul>
<li class="hvr-fade" class="current-menu-item">HOME</li>
<li class="hvr-fade" >INTRODUCTION</li>
<li class="hvr-fade">COMMITTEES
<ul>
<li class="hvr-fade">Security Council</li>
<li class="hvr-fade">CDIS</li>
<li class="hvr-fade">ECOSOC</li>
<li class="hvr-fade">HRC</li>
<li class="hvr-fade">General Assembly 1</li>
<li class="hvr-fade">General Assembly 2</li>
<li class="hvr-fade">General Assembly 3</li>
</ul>
<li class="hvr-fade">CONTACT</li>
<li class="hvr-fade">NEWS</li>
<li class="hvr-fade">MORE</li>
</ul>
</nav>
</body>
</html>
THANKS!!
You were almost there.
Add as you did
#primary_nav_wrap
{
white-space: nowrap;
....
}
And add also
#primary_nav_wrap ul ul li
{
float:left;
....
}
Instead of
#primary_nav_wrap ul ul li
{
float: none;
....
}
Regards.
If you dont want the LI to resize, just put it in a div tag and set the style of the div something like width= 200px etc. if you want it to resize to a base point then stop then in the style use something like min-width= 150px
Related
I keep trying to change the hover/active text color of my drop down menu to #8AE4E6. However, for some reason it isn't work. I tried adding color:#8AE4E6 under the background-color line but it doesn't seem to change. Also, for some reason my links are purple and orange once active. I don't see in my code every setting these colors. Is this the default? My color for body is white.
Thanks!
Here's the HTML and CSS
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" type="text/css" href="style2.css"/>
<title>SITETEST</title>
</head>
<body>
<div id="bottom"></div>
<div id="surround"></div>
<p id="bottomtext">A - W O R K - I N - P R O G R E S S</p>
<p id="title">YLDNA'S SITE</p>
<nav id="primary_nav_wrap" >
<ul>
<li class="hvr-fade">HOME</li>
<li class="hvr-fade" >INTRODUCTION</li>
<li class="hvr-fade">COMMITTEES
<ul>
<li class="hvr-fade">Security Council</li>
<li class="hvr-fade">CDIS</li>
</ul>
</li>
<li class="hvr-fade"><a href="#">EXECUTIVES</li>
<li class="hvr-fade">NEWS</li>
<li class="hvr-fade">CONTACT</li>
</ul>
</nav>
</body>
</html>
html{
min-height:100%;
background-size:cover;
background-attachment: fixed;
body {
font-family: 'telegrafico';
font-size: 1.1em;
text-align: center;
text-decoration:none;
display:inline;
max-width: 100%;
background-color:#8AE4E6;
background-size:cover;
color:white;
}
#primary_nav_wrap
{
margin-top:15px;
}
#primary_nav_wrap ul
{
list-style:none;
position:absolute;
float:left;
margin:0;
top:100%;
left:27.5%;
padding:0;
max-width:50%;
min-width:50%;
max-height:500px;
min-height:21%;
color:white;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family: 'open sans';
font-size: 0.9em;
font-weight:200;
text-align:center;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:106%;
left:-25%;
padding:0px;
text-align:left;
}
#primary_nav_wrap ul ul li
{
float:left;
width:190px;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 0px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block;
}
.hvr-fade {
display: inline-block;
border-radius: 0px;
color: #8AE4E6;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
color: #8AE4E6;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
background-color:white;
color:#8AE4E6;
}
The links colors are not changing because you are not targeting the links.
Change your code to this -
/* target anchors*/
.hvr-fade a:hover, .hvr-fade a:focus, .hvr-fade a:active {
background-color:white;
color:#8AE4E6;
}
/* target anchors*/
Also close the style for html{}
html{
min-height:100%;
background-size:cover;
background-attachment: fixed;
} /* missing curly bracket in your question*/
Hope this help you.
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;
}
If I run the markup as it is now the <li> element is not within the <ul> element.
But if I add this style display:block; to #nav a so the complete #nav a declaration looks like this then the <li> element is within <ul>.
#nav a {
display:block;
margin:0;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
}
Can anybody explain why the <li> element is within the <ul> when I add display:block to #nav a?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family:Arial, sans-serif;
font-size:small;
width:720px;
margin:0;
padding:0;
}
#nav {
float:left;
width:100%;
margin:0;
padding:10px 0 0 46px;
list-style:none;
background:#FFCB2D;
}
#nav li {
float:left;
margin:0 1px 0 0;
padding:0;
font-family:"Lucida Grande", "sans-serif";
font-size:90%;
}
#nav a {
/* display:block;*/
margin:0;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
}
#nav a:hover {
color:#333;
padding-bottom:5px;
border-color:#727377;
background:#fff;
}
</style>
<meta charset="utf-8" />
<title>Chapter 3</title>
</head>
<body>
<ul id="nav">
<li id="t-intro">Introduction</li>
<li id="t-about">About Lance</li>
<li id="t-news">News & Events</li>
<li id="t-sponsors">Sponsors</li>
</ul>
</body>
</html>
I update your code...
see following http://jsfiddle.net/LUzbR/
HTML
<ul id="nav">
<li id="t-intro">Introduction</li>
<li id="t-about">About Lance</li>
<li id="t-news">News & Events</li>
<li id="t-sponsors">Sponsors</li>
</ul>
CSS
body
{
font-family:Arial, sans-serif;
font-size:small;
width:720px;
margin:0px;
padding:0px;
}
#nav
{
float:left;
width:100%;
margin: 0px;
padding:10px 0px 0px 46px;
display: block;
list-style:none;
background:#FFCB2D;
}
#nav li
{
float:left;
display: block;
margin:0 1px 0 0;
padding:0;
font-family:"Lucida Grande", "sans-serif";
font-size:90%;
}
#nav a
{
/* display:block;*/
margin:0px;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
display: block;
}
#nav a:hover
{
color:#333;
padding-bottom:5px;
border-color:#727377;
background:#fff;
}
You're floating the #nav element on the left, so all <li> elements will appear outside of that container. Try adding overflow: hidden; to your #nav for starters, although there's probably more that could be done to clean up your CSS.
Without adding display: block, a elements are treated as display: inline. As such, when calculating the size of their parents (height is default to auto), the padding of the a element is omitted, while it is included in cases of display: block.
I am pretty new on css and I want to learn use css effectively but I have now couple of problems/questions, I want to make grey border under my menu but when I zoom in and out border behave so strangely? Sorry my code is not very clean. And how can I retouch my code for better standing?
HTML
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:#d00000;
text-decoration:underline;
}
#home{
background-color:#0000CC;
}
span{
font-style:italic;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul>
<li>sub</li>
<li>sub2</li>
</ul>
</li><!---End of DropDown Videos menu--->
<li>link4</li>
<li>link5</li>
</ul><!---End of nav elements--->
<br class="clearFloat">
</div><!---End of header--->
</div><!---End of wrapper--->
<div id="grey">
</body>
</html>
CSS
#wrapper{
float:center;
}
#grey{
border-bottom:250px solid #a0a0a0;
padding:0px;
margin-left:203px;
margin-right:387px;
}
#header{
margin:auto;
padding:0px;
clear:both;
}
#header ul{
margin:0px;
padding:0px;
line-height:30px;
}
#header li{
margin:0px;
padding:0px;
list-style: none;
float:left;
position:relative;
background-color:#000099;
border:1 solid #0000CC;
top:px;
right:-15%;
}
#header ul li a{
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#header ul ul li a{
color:#0000cc;
}
#header ul ul li{
right:0%;
}
#header ul ul{
margin:0px;
padding:0px;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
}
#header ul li:hover ul {
visibility:visible;
opacity:1 ;
}
#header ul li:hover {
background-color:blue;
}
#header ul li:hover a {
color:black;
}
#header ul ul li:hover a {
color:#d00000;
}
.clearfloat{
clear:both;
margin:0px;
padding:0px;
}
Without completely reworking your code, just think of added a bottom border per 'li'...
Remove your id='grey' and add your border-bottom to your #header li {}. Refresh but note how your 'sub' menus then each have a bottom border now. They inherited it, so you then need to turn those off...hence add border-bottom: none to the #header ul ul li declaration.
Now...if we did a quick rework of your code...
HTML
<div id="wrapper">
<div id="header">
<div id="navwrapper">
<ul id="nav">
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul class="sub">
<li>sub</li>
<li>sub2</li>
</ul>
</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</div>
CSS
html, body { margin:10px;padding:0; }
#wrapper, #header, #navwrapper { margin: 0 auto 0 auto; }
#nav {
padding:0;
margin: 0 auto 0 auto;
line-height:30px;
height:30px;
list-style:none }
#nav li {
border-bottom: solid #a0a0a0 10px;
margin:0;
padding:0;
float:left;
background-color:#000099;
}
#nav a {
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#nav li:hover { background-color:blue; }
#nav li:hover .sub {
visibility:visible;
opacity: 1;
}
#nav .sub a { color:#00c; }
#nav .sub {
margin:0;
padding:0;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
list-style: none;
}
#nav .sub li { clear:both; border-bottom: none; }
Using more naming conventions with your sub menus is safer than just drilling down through the css. You also need to note that any top-level CSS declaration is inherited by all the children within. Such that if you declare #nav li as being black but want all the 'sub' list elements to be blue, that needs to be stated explicitly...AFTER the initial declaration in the CSS document.
Hope this helped...
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.