Sliding door without background CSS

Question

Is it possible to use markup like this

<ul>
   <li><a href="#"><img alt="" src="/image1.jpg"></a></li>
   <li><a href="#"><img alt="" src="/image2.jpg"></a></li>
</ul>

And do a sliding door effect? I have some CSS that looks like this:

ul li {
    list-style-type: none;
    margin:0; padding:0;
}
li a { 
    display:block;
    overflow:hidden;
    width:225px;
}
li a img {
    float:left;
}
li a:hover img {
    float:right;
}

It works in FireFox but IE7 doesn't seem to understand the float:left / float:right code. Any ideas?

Answer 1

Have a look at these articles on A List Apart and see if they do what you need:

• Sliding Doors of CSS
• Sliding Doors of CSS, Part II

They have a lot of other good articles if you can't sleep like me...

Answer 2

Have you tried setting the <li> to block?

ul li { display: block; }

If I recall correctly, IE had issues with lists, unless you explicitly defined the styles.

As an aside: Sliding Doors is a term that has a different meaning to what you describe - might even throw some people off =)