Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Problem z CSS w IE
#1
Witam. Mam problem z podświetlaniem linkó w menu w CSS. Mianowicie, pod każdym linkiem, po najehcaniu na niego powinna pojawiać się chmurka. W operze, firefoxie, safari, google chrome chmurka pojawia sięjak powinna, natomiast w IE 6 link tylko zmienia kolor, tło się nie zmienia. Nie wiem jak sytuacja przedstawia się w IE 7.

Link do strony: http://shishaman.boo.pl/portfolio

Kod html (pomiędzy <body> i </body> ):
Kod:
<body>
<!-- cala strona -->
<div id="site">
    <!-- lewa kolumna -->
    <div id="left">
        <div id="top"></div>
        <div id="content"></div>
    </div>
    
    <!-- odstep miedzy kolumnami -->
    <div id="space"></div>
    
    <!-- prawa kolumna -->
    <div id="right">
        <div id="menu">
            <ul class="linki">
            <li class="link"><a href="#">Home</a></li>
            <li class="link"><a href="#">About us</a></li>
            <li class="link"><a href="#">Portfolio</a></li>
            <li class="link"><a href="#">Contact</a></li>
            </ul>
        </div>
        <div id="why_us"></div>
        <div id="bottom"></div>
    </div>
    
    <!-- stopka -->
    <div id="foot"></div>
</div>
</body>

Kod css (fragment odpowiedzialny za menu):
Kod:
#right {
    width:237px;
    float:right;
    }
#menu {
    background:url(images/menu.gif) no-repeat;
    height:325px;
    }
#menu .linki {
    margin:0;
    padding:0;
    display:block;
    list-style:none;
    }
#menu .link, #menu .link a {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    display:block;
    height:100px;
    font-size:14px;
    color:#CCC;
    text-align:center;
    text-decoration:none;
    padding-top:25px;
    margin-bottom:-65px;
    }
#menu .link:hover {
    background:url(images/chmurka.gif) no-repeat;
    background-position:center;
    }
#menu .link a:hover {
    color:#fff;
    }

Za wszelką pomoc z góry dziękuję ;]
Odpowiedz
#2
W IE7 jest wszystko prawidłowo
[Obrazek: 2guxq1i.gif]
Odpowiedz
#3
Poszukaj na googlach o problemach z "hover".
Odpowiedz
#4
Widze że już kiedyś o tym rozmaiwaliśmy http://www.webmastertalk.pl/css-problem-z-hover-t-1485.html
Metoda polega na dodaniu pliku .htc i używaniu jednocześnie pseudoklasy i klasy (li:hover , li.hover)
Myśle że po tym poście dojedziesz co i jak.

Ale najpierw spróbuj tak zmienić kod (chyba starycz sam CSS) żebyś nie miał :hovera dla li tylko dla a
czyli zamiast:
Kod:
#menu .link:hover

chmurka będzie backgroundem tu
Kod:
#menu .link a:hover
Prawdopodobnie problemem jest brak interpretacji :hover dla elementu li w IE
Odpowiedz
#5
Dziękuje za rady, jutro postaram się coś z tym zrobić ;]
Odpowiedz


Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele
SeoHost.pl