menu w css - problemy z przeglądarkami

[kerios83]

Mam problem z menu. Nie działa pod IE7 (a pod chrome się nie animuje)a nie jestem na tyle zorientowany w css aby to poprawić. Link do strony http://www.diablo3.progamers.pro

Poniżej znajduje się paczka z plikami aby uruchomić menu u siebie na kompie - index.html, css.css oraz katalog IMAGES z potrzebnymi obrazkami:
http://www.megaupload.com/?d=THR50X95

Wszelkie wskazówki/linki do poradników mile widziane.

[Kartofelek]

U mnie działa to i to.
Patrząc w css można natknąć się na wielki syf ;]
Może komentarze walą sprawę (kodowanie). I ten bałagan...

Rady:
Osobiście zainteresował bym się na twoim miejscu techniką CSS SPRITE (poszukaj w googlach), bo przez dużą liczbę oddzielnych grafik, strona działa baaardzo wolno. Przynajmniej menu potnij jako 1 obrazek. W sumie większość na tej stronie możesz osiągnąć na 1 obrazek + css.

[kerios83]

Mi pod IE 7 pokazuje błędy, pod chrom animuje tylko 1 raz. Kod jest wstawiony na szybcika - powywalałem zbędne spacje. Komentarze usunę jak będzie zrobione na tip-top.

Masz jakieś pomysły jak to naprawić pod IE ?
http://img812.imageshack.us/img812/8422/bladcss.jpg

Zapomniałem dodać, że wywaliłem:

/* IE */
zoom: 1;
*display: inline;
_height: 132px;
/* end of IE */

bo się nie walidowało. Menu już zrobione z obrazkiem - rollover (1obrazek). Jest tylko 1 problem, wystarczy przesunąć myszkę o 1px aby z powrotem rozpoczęła się animacja co bardzo przeszkadza.

- http://www.megaupload.com/?d=ZH37BS6F

[kerios83]

Niestety nie da się zrobić tego efektu - obrazek jest wtedy nieklikalny.

[Kartofelek]

Jakiego efektu?

[kerios83]

W nowszej wersji strony testowej - połączyłem 2 obrazki - pierwsze okienko w menu.
Zamiast osobno obrazka + animowanego gifa jest teraz jeden animowany gif - i przesuwam go jak poradziłeś za pomocą background-position: (tak aby po najechaniu na obrazek nie było zbędnego ładowania).

Niestety gdy dobrze wszystko poustawiam - kliknięcie w obrazek nie przenosi na podaną stronę jak było do tej pory. Dopiero umieszczenie obrazka nad tłem daje taką możliwość - ale to psuje cały efekt menu.

#obrazek...:hover i #obrazek...a:hover nic nie daja. Zabawa z z-index tez nie... wydaje mi się, że musi zostać tak jak jest bo wersja z jednym obrazkiem zamiast dwóch nie działa.

[Kartofelek]

Chodzi ci o te obrazki ktore przygasaja na czarno?
To nie lepiej zrobic to tak?:

<a href=""> tekst </a> <-- pos relative; text-indent:-999px; overflow:hidden
Do takiego linka dajesz span <- pos :absolute; left i top:0 ; width i height takie jak link, overflow:hidden i display:block.
Sam ogarniesz.
i odpowiednio go animujesz
np w jquery:

Kod:

$('#jakis_link')
.bind('mouseenter', function() {
   var $span = $('<span></span>');
   $(this).append($span.animate({opacity:0.5},function(){$(this).fadeOut();})
})
.bind('mouseleave', function() {$(this).children('span').remove()});

Pisane z głowy w textarea, więc mogą być błędy ;]

---

Ps. Ogólnie całkiem przyjemne graficznie. Gdyby właśnie jeszcze udoskonalić usability i oprogramowanie tego było by super cacy. Aż się przypomina mój stary projekt o fantastyce ;] łezka w oku się zakręciła

[kerios83]

Tak o te obrazki. Ten język to java script - nie każdy ma go chyba włączonego. W php jeszcze trochę się orientuje ale java to dla mnie nowość. Rozumiem, że bibliotek javy jest kilka i każda się czymś różni ? Czy może obsługa tego języka jest automatycznie wbudowana w przeglądarki ?

Specjalnie tego menu nie zrobiłem we flashu, bo też czasami są problemy, np. u mnie w firmie jest wyłączony. Poza tym strona gorzej się pozycjonuje,wymaga nowszego sprzętu, itp.

W sumie najlepiej jak by to menu działało tak jak do tej pory tylko z jednym obrazkiem zamiast 2 - jeżeli jest to możliwe, byłbym wdzięczny za podpowiedź.

podaj link do projektu - może coś zmałpuje