The background image and background color of the #nav div does not show in IE7. Neither does the background image of #nav ul. It seems to work fine in IE8 and FF3.
CSS:
#nav {
background: #e4f2fd url("../img/nav-left-bg.png") no-repeat left;
height: 34px;
float: right;
position: relative;
margin-top: 4.5em;
z-index: 1000;
width:300px;
}
#nav ul {
float: left;
list-style: none;
background: url("../img/nav-right-bg.png") no-repeat right;
height: 34px;
padding-right: 0.5em;
margin: 0 0 0 1em;
}
#nav ul li {
display: inline;
}
#nav ul li a {
display: block;
float: left;
padding: 3px;
margin: 0.5em 0.5em 0.5em 0;
font-size: 1.2em;
color: #2664a3;
text-decoration: none;
}
#nav ul li a:hover { background: #bae2f7; color: #0b2539; }
XHTML:
<div id = "nav">
<ul>
<li><a href="">Statistics</a></li>
<li><a href="">Passwords</a></li>
<li><a href="">About</a></li>
<li><a href="">Logout</a></li>
</ul>
</div>
