Hi,
Please have a look at this page, HTML code and CSS is given below and the images are attached. The menu is working fine in all browsers except IE6.
I used the background image on hover state.
Please help me how can I make everything work in IE6 too?
HTML code:
<div id=“wrapper”>
<div id=“top-bg”></div>
<div id=“middle-bg”>
<div id=“logo”></div>
<div id=“navigation”>
<ul>
<li><a href=“#”><span>Link 1</span></a></li>
<li><a href=“#”><span>Link 2</span></a></li>
<li><a href=“#”><span>Link 3</span></a></li>
<li><a href=“#”><span>Link 4</span></a></li>
<li><a href=“#”><span>Link 5</span></a></li>
</ul><br style=“clear: left” />
</div>
<div id=“main-img”></div>
<div id=“img-btn1”></div>
<div id=“img-btn2”></div>
</div>
<div id=“bottom-bg”></div>
</div>
CSS:
body {
background: #e1dfd8;
margin: 0;
padding: 0;
}
#wrapper {
margin: 12px auto;
padding: 0;
width: 859px;
}
#navigation{
margin: 0;
padding: 0;
}
#navigation ul{
margin: 0;
float: left;
padding: 0;
font: bold 15px Arial;
background: #c00000 url(…/images/a.gif) repeat-x;
width: 859px;
}
#navigation ul li{
display: inline;
}
#navigation ul li a{
float: left;
color: white;
font-weight: bold;
padding: 5px 30px 0px 25px;
text-decoration: none;
line-height: 30px;
}
#navigation ul li a:visited{
color: white;
}
#navigation ul li a:hover, #navigation ul li a#selected{
color: lightyellow;
background: url(…/images/b.gif)repeat-x;
height: 30px;
}
#navigation a span {
display:block;}
#navigation a:hover span {
background: url(…/images/pointer.gif) bottom no-repeat;
}
Thanks in advance.
