Mini strona OperaPL osiołkuje w Mozilli

[andol]

Od pewnego czasu nie sprawdzałem wyglądu mojej strony (http://operapl.prv.pl) w Mozilli. Dzisiaj to zrobiłem i się przeraziłem. Nie wprowadzałem ostatnio żadnych istotnych zmian i nie mogę dojść, co może być powodem tak dziwnego zachowaia strony...

Obecnie mam zainstalowaną Mozillę 1.6 oraz Firebirda 0.7 (Windows). Jeżeli ktoś posiada starsze wersje tych przeglądarek, byłbym wdzięczny za sprawdzenie, czy w nich również występują dziwne efekty polegające na pojawianiu się tła oraz banera na szarych elementach strony (nagłówek H1, menu z lewej strony, itp.) Szczególnie dziwne efekty występują po rozpoczęciu przewijania...

Nie proszę oczywiście o sprawdzanie kodu, a jedynie o potwierdzenie, że w starszych wersjach błędy również występują.

[athantor]

Od pewnego czasu nie sprawdzałem wyglądu mojej strony (http://operapl.prv.pl) w Mozilli. Dzisiaj to zrobiłem i się przeraziłem. Nie wprowadzałem ostatnio żadnych istotnych zmian i nie mogę dojść, co może być powodem tak dziwnego zachowaia strony...

U mnie wygląda tak samo pod operą i pod Firebirdem. Różnią się tylko czcionkami.

[Gandalf]

u mnie tylko opoznienie przesuwania loga...

[Olhado/256]

U mnie też tylko to słynne opóźnienie.

[andol]

Znalazłem powód, jednak nie za bardzo go rozumiem...
Tak wygląda strona w moim Firebirdzie: http://operapl.prv.pl/tmp/firebird.png

Szare elementy mają ustawione jako tło półprzezroczysty obrazek png o rozmiarach 4x4 piksele (obrazek znajduje się tutaj: http://operapl.prv.pl/img/bgtrans_alpha50.png).

Poniższa definicja wygląda nieco dziwnie, jednak chodziło o to, aby tło nie było wyświetlane w IE (który nie obsługuje półprzezroczystych obrazków png):
div[class="menubar"], div#mainmenu, div[class="rightbox"], div[class="grayedbox"], div#content > H1, *[class="ui"], *[class="lg"], *[class="button"] {
background-color:transparent;
background-image:url(img/bgtrans_alpha50.png);
}

Po usunięciu powyższego kodu nie ma problemów w Mozilli.

Dziwi mnie, że u innych użytkowników nie ma tego efektu

[Domel]

div[class="menubar"], div#mainmenu, div[class="rightbox"], div[class="grayedbox"], div#content > H1, *[class="ui"], *[class="lg"], *[class="button"] {
background-color:transparent;
background-image:url(img/bgtrans_alpha50.png);
}

Po usunięciu powyższego kodu nie ma problemów w Mozilli.

Nie chcem tu bronic Mozilli bo kodu nie widzialem (na powyzszy url nie moge sie dostac)
Ale ten kod to jakas sieszka. Od kiedy w (X)HTML-u uzywa sie transkrypcji znacznik[class]? Od tego ja klasy i po to zostaly wymyslone.

[andol]

Napisałem, że kod wygląda tak a nie inaczej ze względu na IE.

Zmiana na:
div.menubar, div#mainmenu, div.rightbox, div.grayedbox, div#content > H1, .ui, .lg, .button {
background-color:transparent;
background-image:url(img/bgtrans_alpha50.png);
}

nic nie zmienia w sposobie renderowania strony przez Mozillę.

Problemem jest obrazek.

[Domel]

nic nie zmienia w sposobie renderowania strony przez Mozillę.

Co niezmienia tego ze tak sie nie robi.

[andol]

(na powyzszy url nie moge sie dostac)

prv.pl najwyraźniej nie działa.
Adres: http://starzaki.eu.org/~hclan/operapl/

Screenshot: http://starzaki.eu.org/~hclan/operapl/tmp/firebird.png

Obrazek tła: http://starzaki.eu.org/~hclan/operapl/i ... lpha50.png

[andol]

nic nie zmienia w sposobie renderowania strony przez Mozillę.

Co niezmienia tego ze tak sie nie robi.

Przykład ze strony http://www.w3.org/TR/CSS2/selector.html:

In the following example, the selector matches all SPAN elements whose "class" attribute has exactly the value "example":

SPAN[class=example] { color: blue; }

[Domel]

Przykład ze strony http://www.w3.org/TR/CSS2/selector.html:

In the following example, the selector matches all SPAN elements whose "class" attribute has exactly the value "example":

SPAN[class=example] { color: blue; }

Przyklad to przyklad i nic wiecej. Rozwijajac poniewaz nie separujesz kilku klas to zalis znacznik[class="nazwa"] ma takie same znaczenie jak [class~="nazwa"] a tutaj to to samo co .nazwa. http://www.w3.org/TR/CSS2/selector.html#class-html

[andol]

Problem występuje w następujących wersjach Mozilli:
Mozilla/5.0 (Windows; U; Windows NT 5.0; PL; rv:1.5) Gecko/20031007 Firebird/0.7

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6a) Gecko/20031030
MozillaPL

Na forum Opery quiris zasygnalizował, że w następujących wersjach problem nie występuje:

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6b) Gecko/20031215 Firebird/0.7+ (nightly z 15 grudnia)

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5.1) Gecko/20031124

Więc może jednak jakiś bug w posiadanych przeze mnie wersjach Mozilli?

[andol]

Przyklad to przyklad i nic wiecej. Rozwijajac poniewaz nie separujesz kilku klas to zalis znacznik[class="nazwa"] ma takie same znaczenie jak [class~="nazwa"] a tutaj to to samo co .nazwa. http://www.w3.org/TR/CSS2/selector.html#class-html

Wiem, że:
div.cos == div[class="cos"]


Rozwiązanie to stosuję z premedytacją, aby:
1. móc wykorzystywać na stronie półprzezroczyste obrazki png nieobsługiwane przez IE (a obsługiwane przez Operę, Mozillę itd...)
2. strona mimo wszystko dobrze wyglądała w IE

IE nie obsługuje konstrukcji typu div[class="cos"], dzięki czemu nie próbuje wyświetlać obrazków.

[Domel]

Na forum Opery quiris zasygnalizował, że w następujących wersjach problem nie występuje

Calkiem mozliwe bo u mnie nie wystepuje w Kmelenonie 0.8.1 (i 0.7), w Mozilli 1.4.1 i Mozilla Firebird z 19 grudnia 2003

[Domel]

Wiem, że:
div.cos == div[class="cos"]

To zle wiedz bo to nie prawda. Wiem, wiem ze mi nie wierzysz wiec sprawc link, ktory sam podales

[quiris]

Wiem, że:
div.cos == div[class="cos"]

To zle wiedz bo to nie prawda. Wiem, wiem ze mi nie wierzysz wiec sprawc link, ktory sam podales

Tak. Masz rację:
ID selectors have a higher precedence than attribute selectors. For example, in HTML, the selector #p123 is more specific than [ID=p123] in terms of the cascade.

[Domel]

Tak. Masz rację

WOW, pierwszy raz mi prznajesz racje, tylko ze...

ID selectors have a higher precedence than attribute selectors. For example, in HTML, the selector #p123 is more specific than [ID=p123] in terms of the cascade.

Nie o to mi chodzilo

[quiris]

Tak. Masz rację

WOW, pierwszy raz mi prznajesz racje, tylko ze...
Nie o to mi chodzilo

No w sumie to rozmowa jes o klasach a nie od indentyfikatorach... To zdradź tę tajemnicę . Przyznaję Ci rację w wielu sprawach, ale o tym nie piszę, bo to nie jest temat dla prasy

[marcoos]

Testowałem pod Linuksem:

Netscape 7.1 (==Mozilla 1.4) - ok
Mozilla 1.5 - ok
mój Firebird - ok

(Za wyjątkiem opóźnienia logo, ale to zgłoszony błąd).

[Domel]

No w sumie to rozmowa jes o klasach a nie od indentyfikatorach...

No wlasnie

To zdradź tę tajemnicę .

Raz juz o tym pisalem w tym watku, po za tym jest to w specyfikacji (co wydaje sie w tym apekcie oczywiste - wpominalem rowniez o tym linku)
Ale powtorze: "." == "~=" a nie rowna sie "=" oczywisice zalaczam dowod w posaci specyfikacji http://www.w3.org/TR/CSS2/selector.html#class-html
Oczywiscie w przypadku strony w operapl.prv.pl nie ma to znaczenia bo nie uzywa kilku klas oddizelonych separatorami ale generalnie o to chodzi i napewno nie mozna powiedziez ze kropka to to samo co rowna sie bo zaciemnia to sprawe i moze spowodowac wielkie bledy.