Sliding Doors - я сдаюсь

[aero]

Уважаемые Господа!

Вот два примера из той самой статьи, в первом background ездит в ИЕ7, во втором ездит в ИЕ6.

Есть ли возможность одновременной работы в обоих браузерах?

На первый взгляд, достаточно проставить span в варианте 10 и все должно заработать, но у меня ничего не выходит, бэкграунд в ИЕ6 по-прежнему не ездит .

Заранее спасибо всем ответившим.

Пример 10:

http://www.id-as.com/arts/ala/slidingdoors2/v1/ex10.html

HTML:

<div id="header">

 <ul>
 <li id="nav-home"><a href="#">Home</a></li>
 <li id="nav-news"><a href="#">News</a></li>
 <li id="nav-products"><a href="#">Products</a></li>
 <li id="nav-about"><a href="#">About</a></li>
 <li id="nav-contact"><a href="#">Contact</a></li>

 </ul>
</div>

CSS

 
 #header {
 float:left;
 width:100%;
 background:#DAE0D2 url("bg.gif") repeat-x bottom;
 font-size:93%;
 line-height:normal;
 }
 #header ul {
 margin:0;
 padding:10px 10px 0;
 list-style:none;
 }
 #header li {
 float:left;
 background:url("left_both.gif") no-repeat left top;
 margin:0;
 padding:0 0 0 9px;
 border-bottom:1px solid #765;
 }
 #header a {
 float:left;
 display:block;
 width:.1em;
 background:url("right_both.gif") no-repeat right top;
 padding:5px 15px 4px 6px;
 text-decoration:none;
 font-weight:bold;
 color:#765;
 }
 #header > ul a {width:auto;}
 /* Commented Backslash Hack hides rule from IE5-Mac */
 #header a {float:none;}
 /* End IE5-Mac hack */
 #header a:hover {
 color:#333;
 }
 #home #nav-home, #news #nav-news,
 #products #nav-products, #about #nav-about,
 #contact #nav-contact {
 background-position:0 -150px;
 border-width:0;
 }
 #home #nav-home a, #news #nav-news a,
 #products #nav-products a, #about #nav-about a,
 #contact #nav-contact a {
 background-position:100% -150px;
 padding-bottom:5px;
 color:#333;
 }
 #header li:hover, #header li:hover a {
 background-position:0% -150px;
 color:#333;
 }
 #header li:hover a {
 background-position:100% -150px;
 }

Пример 8а:

http://www.id-as.com/arts/ala/slidingdoors2/v1/ex8a.html

HTML:

<div id="header">

 <ul>
 <li><a href="#"><span>Home</span></a></li>
 <li id="current"><a href="#"><span>News</span></a></li>
 <li><a href="#"><span>Products</span></a></li>
 <li><a href="#"><span>About</span></a></li>
 <li><a href="#"><span>Contact</span></a></li>

 </ul>
</div>

CSS:

 
 #header {
 float:left;
 width:100%;
 background:#DAE0D2 url("bg.gif") repeat-x bottom;
 font-size:93%;
 line-height:normal;
 }
 #header ul {
 margin:0;
 padding:10px 10px 0;
 list-style:none;
 }
 #header li {
 display:inline;
 margin:0;
 padding:0;
 }
 #header a {
 float:left;
 background:url("left_both.gif") no-repeat left top;
 margin:0;
 padding:0 0 0 9px;
 border-bottom:1px solid #765;
 text-decoration:none;
 }
 #header a span {
 float:left;
 display:block;
 background:url("right_both.gif") no-repeat right top;
 padding:5px 15px 4px 6px;
 font-weight:bold;
 color:#765;
 }
 /* Commented Backslash Hack hides rule from IE5-Mac */
 #header a span {float:none;}
 /* End IE5-Mac hack */
 #header a:hover span {
 color:#333;
 }
 #header #current a {
 background-position:0 -150px;
 border-width:0;
 }
 #header #current a span {
 background-position:100% -150px;
 padding-bottom:5px;
 color:#333;
 }
 #header a:hover {
 background-position:0% -150px;
 }
 #header a:hover span {
 background-position:100% -150px;
 }

[aero]

В общем, нашло на меня вчера вдохновение, и я его довел до ума.

Результат можно посмотреть здесь: http://fischer.su/

Eсли надо, чтобы при наведении двигалась еще и левая кнопка, то надо заменить

#header li на #header a

и добавить #header li {display:inline;}

Всем удачи!

[ZoNT]

в ФФ очень оригинально смотрится меню

[Dimitry Wolotko]

=)

[aero]

ZoNT

какая версия?

IE6,7 Opera 9, FF 2.0 - все в порядке.

[Dimitry Wolotko]

ZoNT, там оказывается задумка такая.

[ZoNT]

Жесть.