Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] IE6 nie zwraca uwagi na niektóre class
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
szczurek
Więc do rzeczy. W książce "CSS według Erica Meyera, kolejna odsłona" jest bardzo fajne rozwiązanie rozwijanego menu(rozdział 6). Kiedy potrzebuję takiego sięgam właśnie do tej książki.

Teraz robię coś po koleżeńsku no i "zleceniodawca" wymyślił sobie że menu będzie graficze. Zacząłem modyfikować kod dodałem odpowiednie klasy no i pod ff i operą wszystki podmienia się tak jak chcę a pod IE wszystko się rozwija ale kiedy najeżdżam na jakiś element to jako tło podmienia obrazek podany w ostatniej klasie definiowanej w css a nie w klasie o tej nazwie. Co jest dziwne bo bez howera daje dobre obrazki a są wstawiane tą samą metodą.

Trochę zakręciłem więc może pokaże co się dzieje.
Tutaj

a oto kod za to odpowiedzialny.
  1. <div id="nav">
  2. <ul class="level1">
  3.  
  4. <li class="submenu restauracja"><a class="submenu"></a>
  5. <ul class="level2">
  6. <li class="sub"><a class="sub" href="/services/strategy/"><img class="sub" src="pzrzyciski/01 konferencje.jpg" alt="konferencje" /></a></li>
  7. <li class="sub"><a class="sub" href="/services/optimize/"><img class="sub" src="pzrzyciski/02 szkolenia.jpg" alt="szkolenia" /></a></li>
  8. <li class="sub"><a class="sub" href="/services/guidance/"><img class="sub" src="pzrzyciski/03 wesela.jpg" alt="wesela" /></a></li>
  9. <li class="sub"><a class="sub" href="/services/training/"><img class="sub" src="pzrzyciski/04 imprezy.jpg" alt="imprezy" /></a></li>
  10. </ul>
  11. </li>
  12. <li class="menu"><a href="in"> </a></li>
  13. <li class="wydarzenia"><a href="/events/"></a></li>
  14. <li class="gal"><a href="/events/"></a></li>
  15. <li class="kontakt_m"><a href="/contact/"></a></li>
  16. </ul>
  17. </div>


css:
  1. /* MENU */
  2.  
  3. div#nav {float: left; margin: -1px 0 0 7em;}
  4. div#nav ul {margin: 0; padding: 0;}
  5. div#nav li {position: relative; list-style: none; margin: 0;
  6. float: left;}
  7. div#nav li:hover {}
  8. div#nav li.submenu {}
  9. div#nav li.submenu:hover {}
  10. div#nav li a {display: block;
  11. text-decoration: none;
  12. font-weight: bold; color: #BABC74;}
  13. div#nav>ul a {width: auto;}
  14. div#nav ul ul {position: absolute;
  15. display: none;}
  16. div#nav ul ul li {}
  17. div#nav li.submenu li.submenu {}
  18. div#nav ul.level1 li.submenu:hover ul.level2,
  19. div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
  20. div#nav ul.level2 {top: 38px; left: -1px; margin-top: 2px;}
  21. div#nav ul.level3 {top: -1px; left: 7em;}
  22.  
  23. /* DADATKOWE*/
  24. div#nav li.menu{
  25. background-image: url(pzrzyciski/menu2.jpg);
  26. height: 40px;
  27. width: 82px;
  28. }
  29. div#nav li.menu:hover{
  30. background-image: url(pzrzyciski/menu.jpg);
  31. }
  32.  
  33. div#nav li.restauracja{
  34. background-image: url(pzrzyciski/restauracja_01.jpg);
  35. height: 40px;
  36. width: 119px;
  37. }
  38. div#nav li:hover.restauracja
  39. {
  40. background-image: url(pzrzyciski/restauracja_02.jpg);
  41. }
  42.  
  43. div#nav li.wydarzenia{
  44. background-image: url(pzrzyciski/wydazenia2.jpg);
  45. height: 40px;
  46. width: 117px;
  47. }
  48. div#nav li.wydarzenia:hover{
  49. background-image: url(pzrzyciski/wydazenia.jpg);
  50. }
  51.  
  52. div#nav li.gal{
  53. background-image: url(pzrzyciski/galeria2.jpg);
  54. height: 40px;
  55. width: 97px;
  56. }
  57. div#nav li.gal:hover{
  58. background-image: url(pzrzyciski/galeria.jpg);
  59. }
  60.  
  61. div#nav li.kontakt_m{
  62. background-image: url(pzrzyciski/kontakt2.jpg);
  63. height: 40px;
  64. width: 118px;
  65. }
  66. div#nav li.kontakt_m:hover{
  67. background-image: url(pzrzyciski/kontakt.jpg);
  68. }
  69.  
  70. div#nav li.sub{
  71. height: 29px;
  72. padding-left: 0;
  73. }
  74. div#nav img.sub{
  75. width: 119px;
  76. border: 0;
  77. }
  78.  
  79. div#nav a.sub{
  80. border: 0;
  81. }


Może ktoś ma pomysł jak pomóc IE wyświetlać po najechaniu takie obrazki jak ja chcę a nie ciągle ten sam.
Pozdrawiam.
jarrod
IE 6 nie respektuje atrybutu hover dla elementów innych niż <a>.
Użyj w tym wypadku javascriptów i atrybutu onmouseover aby otrzymać prawidłowy efekt pod IE 6. Dopierto wersja 7 doczekała się odpowiedniej reakcji na hover...
LBO
whatever:hover
szczurek
ech wiem o tym, mam dołączony plik htc i jak zauważyliście IE reaguje na hower tagu li i podmienia obrazek niestety na ten o sotatniej klasy anie dla każdej klasy inny. To jest właśnie mój problem. A js wolałbym uniknąć.
LBO
Cytat
A js wolałbym uniknąć.

Cytat ze strony domowej whatever:hover
Cytat
...define your own behavior [...] All you really need to know is how to hook up a behavior, and how to use jscript, which for the intended purpose is the same as javascript.
gekon
Spróbuj zmienić adresy do obrazków na bezpośrednie (http://poezjaa.info/res/pzrzyciski/obrazek.png) a potem na względne (/pzrzyciski/obrazek.png), cudzyłowy też nie zaszkodzą (albo inne apostrofy: background-image: url("URL");).
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.