Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: gradient, zaokraglone rogi i IE...

Nasz layout nie przewiduje wodotryskow, poza zaokraglonymi rogami, cieniami i gradientami. CSS3, ktorych staram sie uzywac, dzialaja wszedzie poza IE... poczytalam o css3pie i chcialabym go uzyc, ale mimo stosowania sie do instrukcji... nie bangla...

mam dwie przykladowe klasy:

.classA {
border-radius: 0 0 13px 13px;
-webkit-border-radius: 0 0 13px 13px;
-moz-border-radius: 0 0 13px 13px;
background: -webkit-gradient(linear, left top, left bottom, from(#10559b), to(#0070e0));
background: -moz-linear-gradient(top, #10559b, #0070e0); /* For Mozilla/Gecko (Firefox etc) */
background: -o-linear-gradient(top,rgb(16,85,155),rgb(0,112,224));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#10559b, EndColorStr=#0070e0)";
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#10559b, EndColorStr=#0070e0)";
color: #FFFFFF;
text-weight: bold;
overflow: visible;
padding: 6px 0 4px 12px;
text-decoration: none;
behavior:url(http://domena.com/css/PIE.htc);
}

.classB {
border-radius: 0 0 15px 15px;
-webkit-border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
box-shadow: 0px 3px 3px #999;
-moz-box-shadow: 0px 3px 3px #999;
-webkit-box-shadow: 0px 3px 3px #999;
background-color:#52B254;
background-image: -webkit-gradient(linear, left top, left bottom, from(#52B254), to(#228631));
background-image: -moz-linear-gradient(top, #52B254, #228631); /* For Mozilla/Gecko (Firefox etc) */
background: -o-linear-gradient(top,rgb(82,178,84),rgb(34,134,49));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#52B254, EndColorStr=#228631);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#52B254, EndColorStr=#228631)";
zoom:1;
behavior: url(http://domena.com/css/PIE.htc);
}


Jesli chodzi o classA to jest ona uzywana na tagu A o odpowiednim id. Zadne gradienty, ani tym bardziej zaokraglone rogi nie dzialaja.
ClassB uzywane jest na tagu UL o odpowiednim id. Dziala tylko gradient, bez zakraglonych rogow i cienia...
Plik PIE.htc znajduje sie w prawidlowej sciezce. Pod FF, Chrome i Opera wszystko bangla... pomozcie, prosze.Maja Miarecka edytował(a) ten post dnia 25.04.12 o godzinie 13:05
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: gradient, zaokraglone rogi i IE...

Maja Miarecka:
Nasz layout nie przewiduje wodotryskow, poza zaokraglonymi rogami, cieniami i gradientami.
TO są właśnie wodotryski! ;)

Gdy używam PIE'a, w klasy nie wpisuję już tych -ms-filter ani żadnych moz'ów itp i działa.
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: gradient, zaokraglone rogi i IE...

Adam Pawliczek:
Maja Miarecka:
Nasz layout nie przewiduje wodotryskow, poza zaokraglonymi rogami, cieniami i gradientami.
TO są właśnie wodotryski! ;)

Wodotryski byly wczesniej... ale caly ich komplet chyba nie zadzialalby w zadnej przegladarce :P
Gdy używam PIE'a, w klasy nie wpisuję już tych -ms-filter ani żadnych moz'ów itp i działa.

przetestowalam w kazda mozliwa strone (z filtrami i bez), i nie dziala... testuje pod IE7 i IE8.
Mariusz Witek

Mariusz Witek Programista PHP,
Front-End Developer

Temat: gradient, zaokraglone rogi i IE...

PIE może Ci nie działać, ponieważ serwer może serwować pliki .htc bez odpowiedniego mime type.

Dodaj sobie do .htaccess linijkę:
AddType text/x-component htc

Albo użyj pliku php dołączonego do paczki z PIE.

konto usunięte

Temat: gradient, zaokraglone rogi i IE...

i jeszcze zamień filtry na

-pie-background: linear-gradient(#EEFF99, #66EE33);


przetestowałem lokalnie Twój kod i działa
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: gradient, zaokraglone rogi i IE...

Mariusz Witek:
PIE może Ci nie działać, ponieważ serwer może serwować pliki .htc bez odpowiedniego mime type.

Zgadza sie, u mnie szlo jako text/html
Dodaj sobie do .htaccess linijkę:
AddType text/x-component htc

Dodane... ale nie dziala
Albo użyj pliku php dołączonego do paczki z PIE.

Nie dziala...

Sprawdzilam w access logu, IE poprawnie wola plik PIE.htc, dostaje go z kodem 200, czyli wszystko gra i buczy... to ki diabel???
Cezary H.:
i jeszcze zamień filtry na

-pie-background: linear-gradient(#EEFF99, #66EE33);

A moglbys mi jeszcze podpowiedziec skladnie do tego? bo jak rozumiem przyklad zmienia gradient od gory do dolu, a od prawej do lewej?
przetestowałem lokalnie Twój kod i działa

No zesz... to czemu u mnie nie chce? to jest wkurzajace... a na koncu pewnie jakis drobiazg wyjdzie :/

konto usunięte

Temat: gradient, zaokraglone rogi i IE...

A moglbys mi jeszcze podpowiedziec skladnie do tego? bo jak rozumiem przyklad zmienia gradient od gory do dolu, a od prawej do lewej?


-pie-background:linear-gradient(left,#000 50%,#66EE33 100%);


'left' - odpowiada za kierunek z jakiego zaczynasz,
mozesz tez wpisa np "left bottom" - to będzie po skosie

tu masz wyjaśnienie
http://css3pie.com/documentation/supported-css3-features/
przetestowałem lokalnie Twój kod i działa

No zesz... to czemu u mnie nie chce? to jest wkurzajace... a na koncu pewnie jakis drobiazg wyjdzie :/

spróbuj eliminować kawałki kodu,
i odświeżaj często cache ie
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: gradient, zaokraglone rogi i IE...

Cezary H.:

-pie-background:linear-gradient(left,#000 50%,#66EE33 100%);


'left' - odpowiada za kierunek z jakiego zaczynasz,
mozesz tez wpisa np "left bottom" - to będzie po skosie

tu masz wyjaśnienie
http://css3pie.com/documentation/supported-css3-features/

Dzieki :)
spróbuj eliminować kawałki kodu,
i odświeżaj często cache ie

Wyglada na to, ze powod sie znalazl... aczkolwiek sprawdze to jutro, jak nasz CTO wroci. Proby odwolania sie do tego pliku ZAWSZE zwracaja mi nasza strone glowna... wiec podejrzewam, ze mamy jakies filtry na rozszerzenia.

Jutro dam znac czy moja teoria jest sluszna, niech zyje curl -v :P

konto usunięte

Temat: gradient, zaokraglone rogi i IE...

Wyglada na to, ze powod sie znalazl... aczkolwiek sprawdze to jutro, jak nasz CTO wroci. Proby odwolania sie do tego pliku ZAWSZE zwracaja mi nasza strone glowna... wiec podejrzewam, ze mamy jakies filtry na rozszerzenia.

Jutro dam znac czy moja teoria jest sluszna, niech zyje curl -v :P

a no może być tak, że htaccess przekierowuje do index.php,

powodzenia
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: gradient, zaokraglone rogi i IE...

To powrot do tematu.

Oczywiscie okazalo sie prawda, ze mamy zablokowane wszystkie rozszerzenia poza... i tu lista. Dodalismy *.htc do listy, ustalilam typ pliku i... przy poleceniu curl -v dostaje plik PIE.htc z prawidlowym Content-Type. Gra i buczy.

A jednak nie... Bo moj IE7 uparcie twierdzi ze:

Access is denied to: PIE.htc Line: 0 Char: 0 Code: 0

Sprawdzilam na serwerze - plik jest, zmienilam sciezke ze wzglednej na bezwygledna, dalej nie dziala. zrobilam prosty plik html lokalnie i do tego samego katalogu wkopiowalam PIE.htc. W css zrobilam jedna prosta definicje z behavior: url(PIE.htc);. Nie dziala.

Podpowiedzcie cos prosze, bo juz nie wiem, co jest grane.
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: gradient, zaokraglone rogi i IE...

.Maja Miarecka edytował(a) ten post dnia 24.05.12 o godzinie 15:40

konto usunięte

Temat: gradient, zaokraglone rogi i IE...

Maja Miarecka:
To powrot do tematu.

Oczywiscie okazalo sie prawda, ze mamy zablokowane wszystkie rozszerzenia poza... i tu lista. Dodalismy *.htc do listy, ustalilam typ pliku i... przy poleceniu curl -v dostaje plik PIE.htc z prawidlowym Content-Type. Gra i buczy.

A jednak nie... Bo moj IE7 uparcie twierdzi ze:

Access is denied to: PIE.htc Line: 0 Char: 0 Code: 0

Sprawdzilam na serwerze - plik jest, zmienilam sciezke ze wzglednej na bezwygledna, dalej nie dziala. zrobilam prosty plik html lokalnie i do tego samego katalogu wkopiowalam PIE.htc. W css zrobilam jedna prosta definicje z behavior: url(PIE.htc);. Nie dziala.

Podpowiedzcie cos prosze, bo juz nie wiem, co jest grane.

Uzywasz normalnego IE czy standalone?

konto usunięte

Temat: gradient, zaokraglone rogi i IE...

Czy Ty czasem nie używasz MultipleIE?
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: gradient, zaokraglone rogi i IE...

Nie, mam na virtualboxie postawiona viste a na niej IE8, na drugiej instalacji mam viste z IE7. Wiem, ze na tych wszystkich wynalazkach nei da sie wszystkiego przetestowac.

Wczoraj doszlam do wniosku, ze moze cos nie tak mam z ustawieniami, ze moze debugBar cos psuje, wiec postawilam kolejna instalacje visty na vb. Swiezynka Windows z IE7. Bledem nie rzuca (wiem, ze ten komunikat jest produkowany przez debugBar) ale PIE.htc tez nie czyta... albo czyta wybiorczo, bo widze cienie, ale gradientu nie.

konto usunięte

Temat: gradient, zaokraglone rogi i IE...

Maja Miarecka:
Nie, mam na virtualboxie postawiona viste a na niej IE8, na drugiej instalacji mam viste z IE7. Wiem, ze na tych wszystkich wynalazkach nei da sie wszystkiego przetestowac.

Wczoraj doszlam do wniosku, ze moze cos nie tak mam z ustawieniami, ze moze debugBar cos psuje, wiec postawilam kolejna instalacje visty na vb. Swiezynka Windows z IE7. Bledem nie rzuca (wiem, ze ten komunikat jest produkowany przez debugBar) ale PIE.htc tez nie czyta... albo czyta wybiorczo, bo widze cienie, ale gradientu nie.

No to tak. HTC nie dzialaja na pewno odpalane z localhostow i bez serwera, standalone IE tez ma z nimi problem. Jednak podjerzewam ze ta sprawa jest u Ciebie zalatwiona, poniewaz masz cienie.

Ogolnie pliki HTC to slabe rozwiazanie.

Podejrzewam, ze masz blad skladniowy. Wklej moze definicje elementow ktore maja problemy. A noz przeskoczylas srednik i dalas dwukropek :)
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: gradient, zaokraglone rogi i IE...

Konrad Pawlikowski:
Podejrzewam, ze masz blad skladniowy. Wklej moze definicje elementow ktore maja problemy. A noz przeskoczylas srednik i dalas dwukropek :)

Prosze bardzo. Testowy css sklada sie z tej jednej definicji. Testowy html w body ma az jednego spana z id=cap a w spanie text 'abc', yeby go w ogole zobaczyc, wiec pozwole sobie tego kodu nie wklejac :D

#cap {
padding: 0 6px;
font-size: 12px;
border-left: 1px solid #EEE;
border-right: 1px solid #EEE;
margin-bottom: 2px;
text-align: right;
line-height: 25px;
background: #fcfcfc; /*non-CSS3 browsers will use this*/
background: -webkit-gradient(linear, top, from(#f4f4f4) to(#fcfcfc)); /*old webkit*/
background: -webkit-linear-gradient(top, #f4f4f4, #fcfcfc); /*new webkit*/
background: -moz-linear-gradient(top, #f4f4f4, #fcfcfc); /*gecko*/
background: -ms-linear-gradient(top, #f4f4f4, #fcfcfc); /*IE10 preview*/
background: -o-linear-gradient(top, #f4f4f4, #fcfcfc); /*opera 11.10+*/
background: linear-gradient(top, #f4f4f4, #fcfcfc); /*future CSS3 browsers*/
-pie-background: ulinear-gradient(top, #f4f4f4, #fcfcfc); /*PIE*/
-moz-box-shadow: 0 2px 2px #d8d8d8;
-webkit-box-shadow: 0 2px 2px #d8d8d8;
box-shadow: 0 2px 2px #d8d8d8;
behavior:url(PIE.htc);
}

konto usunięte

Temat: gradient, zaokraglone rogi i IE...

a sprawqdzałaś tak ?


behavior:url("http://www.pełny_url_do_pliku.pl/PIE.htc");


wyczyść cache i powinno zadziałać, tak mi wyszło z testów,
a najlepiej olać zaokrąglenia dla ie,
ja tak robię i chyba nikt nie plącze ;)
Rafał S.

Rafał S. Front-end Developer

Temat: gradient, zaokraglone rogi i IE...

Graceful degradation :)

konto usunięte

Temat: gradient, zaokraglone rogi i IE...

Cezary H.:
a sprawqdzałaś tak ?


behavior:url("http://www.pełny_url_do_pliku.pl/PIE.htc");


wyczyść cache i powinno zadziałać, tak mi wyszło z testów,
a najlepiej olać zaokrąglenia dla ie,
ja tak robię i chyba nikt nie plącze ;)

Zgadzam sie, ze dla starszych przegladarek warto rezygnowac z ficzerow typu zaokraglone rogi. Roznica niewielka, funkcjonalnie zadna, a sprawa znakomicie sie upraszcza.

Mam nadzieje, ze Twoj sposob pomoze Mai
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: gradient, zaokraglone rogi i IE...

Witam po dlugim weekendzie :) (przynajmniej po tej stronie Odry byl on dlugi :) )

Probowalam zarowno ze sciezkami wzglednymi jak i z bezwzglednymi. Oczywiscie bez wiekszych rezulatatow.

Z linkami jest taki problem, ze czytalam, ze jest problem z wczytaniem htc jesli rozni sie domena. A u nas w zaleznosci od tego czy dany user jest zalogowany czy nie, domena sie zmienia... wiec raczej jednak wole adresowanie wzgledne.

Na tu i teraz mam dwa pliki css i warunek, ze jesli to IE w wersji 8 lub nizszej, to czytaj jeden plik a w pozostalych sytuacjach - drugi plik. Stare rozwiazanie, ale wciaz chyba najlepsze z mozliwych. W sumie uzytkownicy IE 7 i 8 na naszych stronach to jakies 25%, wiec MUSZE ich brac pod uwage i musza oni widziec zaokraglone rogi... W nowym pliku css mam behavior dla IE. Caly czas licze, ze jednak to zacznie banglac...

Dzieki za wsparcie i pomysly jak poradzic sobie z tym cholerstwem.

Następna dyskusja:

radial gradient background ...




Wyślij zaproszenie do