Date: 09/14/06 (WebDesign)    Keywords: php, css, html, web

Hi all. It's been a while since I last posted. I'm trying something new out and am having a bit of trouble getting it to work in IE. I know it WILL work because the inspiration came from another website. If you look at test.aacapartsandsupplies.com, the menu with the hover images is what I want to use. I am using an unordered list with the span tag, where each list item has a different image.


Image:




CSS:
#header ul {padding: 70px 0px 0 0;
margin: 0;
float: right;
width: 600px;
height: 36px;
overflow: hidden;}

#header ul li, #header ul li a {display: block;
float: left;
height: 36px;
background-position: left top;
overflow: hidden;}

#header ul li a:hover {background-position: left bottom;}

#header ul li a span {display: block;
height: 1px;
width: 1px;
overflow: hidden;}

#home a {background-image: url('images/nav_images/home.png');
background-repeat: repeat;
background-attachment: scroll;
width: 100px;
background-position: 0%}

#products a {background-image: url('images/nav_images/products.png');
background-repeat: repeat;
background-attachment: scroll;
width: 100px;
background-position: 0%}

#news a {background-image: url('images/nav_images/news.png');
background-repeat: repeat;
background-attachment: scroll;
width: 100px;
background-position: 0%}

#forms a {background-image: url('images/nav_images/forms.png');
background-repeat: repeat;
background-attachment: scroll;
width: 100px;
background-position: 0%}

#contact a {background-image: url('images/nav_images/contact.png');
background-repeat: repeat;
background-attachment: scroll;
width: 100px;
background-position: 0%}

#members a {background-image: url('images/nav_images/members.png');
background-repeat: repeat;
background-attachment: scroll;
width: 100px;
background-position: 0%}



HTML:
< div id="header">
< ul>
< li id="home">< a href="index.php">Home
< li id="products">< a href="#">Products
< li id="news">< a href="#">News
< li id="forms">< a href="#">Forms
< li id="contact">< a href="#">Contact
< li id="members">< a href="#">Members
< /ul>
< /div>


Can anyone tell me what I need to do in order to get this to work in IE? Sorry if it's a bit extensive. I've tried looking on the net, but can't seem to find the right thing. If anyone knows of a good tutorial on how to do this I would appreciate a link. Thanks for any help!

Source: http://community.livejournal.com/webdesign/1165133.html