[xHTML i CSS] Efekt rollover za pomocą CSS - problem

Dla specjalistów Webmastering
#1

Witam serdecznie. Mam następujący problem. Koduję swoją stronę i chciałbym zrobić górną nawigację, a w niej efekt rollover za pomocą CSS. Stworzyłem taki oto blok:

  • index_03.png
  • index_04.png
  • index_05.png
  • index_06.png
  • index_07.png
  • index_08.png
    [/code] i dla niego CSS:

[code]#menu li { height:92px; float:left; overflow:hidden; position:relative; } #menu li a:hover img { top:-92px; }

wszystko jest ok tylko nie wiem z jakiego powodu li nie chce się przesunąć o te 92px. Strona chwilowo znajduje się pod tym adresem, także jeśli ktoś chciałby zajrzeć w kod, nie ma problemu.

Z góry bardzo dziękuję za pomoc

pozdrawiam

Karol

#2 
top:-39px

Ale co TOP? margin-top; position; padding-top,… zdefiniuj dokładnie. Z kody “Position: relative” wynika, że powinno byćtak:

position: relative; top: -39px
#3

Dzięki chodzi :slight_smile: Jeden problem rozwiązany, drugi to to, że w FF chodzi, w IE - nie.

#4

Skąd ja to znam… “W FF chodzi, w IE już nie…”

ja bym radził do position:relative dodać:

position: relative; top: odległość normalnie od góry;

Może to coś da…

#5

Dla IE użyj csshover.htc

http://www.xs4all.nl/~peterned/csshover.html

#6

CSSHover chyba jest do elementów innych niż a…ale tak mi się tylko zdaje.

#7

A nie lepiej zrobić to jako css background url?

#8

Właśnie nie bardzo. Nie chce dla każdego elementu menu nadawać osobnej classy, id, gdyż chce mieć CSS jak najbardziej “zoptymalizowany”. Dzięki wszystkim za pomoc. Musze jeszcze pokombinować z tym dla IE.