Раздвижная дверь без фона CSS

Question

Можно ли использовать разметку вот так

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

А эффект раздвижной двери? У меня есть немного CSS, который выглядит так:

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;
}

Это работает в FireFox, но IE7, похоже, не понимает код float: left / float: right. Есть идеи?

Answer 1

Вы пытались установить

для блокировки?

ul li { display: block; }

Если я правильно помню, у IE были проблемы со списками, если вы явно не определили стили.

В качестве отступления: Раздвижные двери - это термин, который имеет значение, отличное от того, что вы описываете - может даже отбросить некоторых людей =)

Answer 2

Посмотрите эти статьи на A List Apart и посмотрите, делают ли они то, что вам нужно:

• Раздвижные двери CSS
• Раздвижные двери из CSS, часть II

У них есть много других хороших статей, если вы не можете спать, как я ...