PDA

Zobacz pełną wersję : menu z obrazkami i problemy w ie6 - item active



Fyner
18-09-2009, 15:58
witam.

mam dość nietypowy problem. pod przegladarkami takimi jak ff, opera i nowsze wersje ie wszystko działa, ale jest problem z przeglądarką ie6 - niestety musi także dobrze działać i pod tą prehistoryczna przeglądarką.
Mianowicie, mam menu, które składa się z obrazków, obrazki gdy menu jest nie aktywne (czyli nie posiada przy item parametru active) są w odcieniach szarości, po kliknięciu w obrazek i pojawieniu się parametru active obrazki się zmieniają na kolorowe. i problem jest w tym, że każde menu ma swój osobny obrazek, i musiałem stworzyć całą listę w css aby to dobrze działało (przykład jednej pozycji):


.item5 {
background: url(images/sub_news1.png) no-repeat;
height: 125px;
width: 125px;
}

.item5.active {
background: url(images/sub_news2.png) no-repeat;
height: 125px;
width: 125px;
}

problem w ie6 objawia się tym, że mając przykładowo 10 takich kodów odpowiednio dla każdego item, to aktywne obrazki (te kolorowe) pojawiają się nie te co powinny tylko z ostatniego kodu .item**.active - czyli, że dla item 1 pojawia sie kolorowy z item10, dla item2 tez z item10 itd.... poniewaz item10 jest ostatni w css'ie.
jak ktoś nie zrozumiał mogę przedstawić na rysunku :)

próbowałem już zamieniać kolejnością item z active, dodawać klasy menu, nawet z id current próbowałem, ie6 wszystko olewa...

moje
18-09-2009, 16:51
Źle to robisz, obrazek czasy i kolorowy umieść w jednym pliku- jeden obok drugiego lub jeden pod drugim. Zmieniaj tylko położenie tła, np. jeśli obrazek mieszany ma 100 px wysokości, a pojedyncze obrazki umieścilismy pionowo, to ustaw tło na 0 od góry, a dla active -50 px od góry.
Dzięki temu napiszesz osobna regułę dla "działania" obrazka i osobną dla przypisania obrazków poszczególnym linką.


.menu a:link, .menu a:visited {
*/ tutaj wstawiasz sobie kod dla "widzialności" obrazków szarych /*
}

.menu a:hover, .menu a:active, .menu a.active {
*/ tutaj wstawiasz sobie kod dla zmiany "widzialności" z obrazków szarych na kolorowe /*
}

.item1 {
background: url(images/item1.png) no-repeat;
}
.item2 {
background: url(images/item2.png) no-repeat;
}
.item3 {
background: url(images/item3.png) no-repeat;
}
.item4 {
background: url(images/item4.png) no-repeat;
}
.item5 {
background: url(images/item5.png) no-repeat;
}
.item6 {
background: url(images/item6.png) no-repeat;
}
.item7 {
background: url(images/item7.png) no-repeat;
}
.item8 {
background: url(images/item8.png) no-repeat;
}
.item9 {
background: url(images/item9.png) no-repeat;
}
.item10 {
background: url(images/item10.png) no-repeat;
}


A teraz fynf ojro :D

Fyner
18-09-2009, 17:05
hmm, kurcze jednak najprostsze rozwiązania są najlepsze, na cos takiego w ogóle nie wpadłem:P

thx, przetestuje