Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: zaokrąglenia rogów w CSS a IE
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
olo707
10.04.2012, 20:58:29
Witam
Za pomocą CSS zrobiłem zaokrąglenia rogów diva używając zapisu -moz-border-radius:10px; w Fire Foxie działa idealnie ale co zrobić aby taki efekt uzyskać w Internet Explorer w wersji 6-8. Nie działają tu zapisy -webkit-border-radius:10px; i -khtml-border-radius:10px; Z góry dzieki za odpowiedż
prowseed
10.04.2012, 21:46:39
Podstawą jest border-radius:10px; i pozniej mozesz sobie robic prefixy, by starsze wersje konkretnych silnikow obsluzyc, natomiast co do Twojego problemu- nie ma opcji, musisz zastapic to grafikami i najlepiej nadac to w stylach wylacznie dla ie
batman
11.04.2012, 06:18:38
Cytat(prowseed @ 10.04.2012, 22:46:39 ) *
natomiast co do Twojego problemu- nie ma opcji

Jak nie ma jak jest - http://css3pie.com/
by_ikar
11.04.2012, 08:37:42
http://border-radius.com/ - generator

@Batman, takie zaokrąglone rogi nie działają w każdej sytuacji, np dla tła obrazkowego, gradientów, i jeszcze kilku innych trudności przy tym jest.. I nie pomogą na to żadne hacki, żadne obejścia itp. Gdyby to istniało i było osiągalne, ot takie allegro dałoby sobie z tym radę i początkowo właśnie kombinowali coś z tymi hackami, ale to delikatnie mówiąc: gówno daje. W efekcie czego pod IE w allegro nie ma zaokrągleń. Tzn pod wersją <9 (wszystkie wersje przed ie9).

A z racji że mi to bardzo dużo krwi napsuło, powiem ci jedno - daruj to sobie, bo efekt który chcesz osiągnąć może się nie dać osiągnąć. A wspieranie IE6 czy IE7 to nie jest najlepszy pomysł. IE8 jeszcze ujdzie, aczkolwiek mogli zrobić to lepiej, IE9 jest już prawie całkiem OK.
batman
11.04.2012, 09:07:04
Cytat
@Batman, takie zaokrąglone rogi nie działają w każdej sytuacji, np dla tła obrazkowego,

No popatrz. A mi działa. Ciekawe co robię źle.

Cytat
Gdyby to istniało i było osiągalne, ot takie allegro dałoby sobie z tym radę i początkowo właśnie kombinowali coś z tymi hackami, ale to delikatnie mówiąc: gówno daje. W efekcie czego pod IE w allegro nie ma zaokrągleń. Tzn pod wersją <9 (wszystkie wersje przed ie9).

Nie chodzi o to, że nie da się tego zrobić. Czasami się po prostu nie opłaca. I mam tutaj na myśli najzwyklejszą kasę.
by_ikar
11.04.2012, 10:02:32
Cytat
No popatrz. A mi działa. Ciekawe co robię źle.

To w takim wypadku napisz do allegro i wielu innych którzy sobie z tym nie radzą - gwarantuje że zarobisz.

Cytat
Nie chodzi o to, że nie da się tego zrobić. Czasami się po prostu nie opłaca. I mam tutaj na myśli najzwyklejszą kasę.

Akurat w przypadku allegro obserwowałem dany temat i oni próbowali i początkowo spora część zaokrągleń działała, ale nie wszystkie. Tyle że to jest gra nie warta świeczki, dlatego że i tak wszędzie ci nie zadziała. Podobnie jest z fixem dla png. Też niby wiele wariantów jest "obsłużonych" ale zdarzają się takie które nie działają i już.

Już nie wspomnę o elementach dynamicznie generowanych przez js, w których zaokrąglenie z wielu hacków nie zadziała w przypadku tła obrazkowego.

Temat jest beznadziejny i MS totalnie spieprzył sprawę i trzeba go w przypadku akurat tych rubensowskich kształtów olać, tak jak on olał innych.
prowseed
11.04.2012, 12:18:52
Cytat(batman @ 11.04.2012, 07:18:38 ) *
Jak nie ma jak jest - http://css3pie.com/


haa, behavior:, no tak- ja osobiscie sie meczylem (akurat nie z css3pie, ale dzialalo na tej samej zasadzie) i mnie po prostu krew zalala w pewnym momencie i sobie darowalem, tak wiec jesli u Ciebie dziala- gratulacje :]
niceaalbosmierc
6.05.2012, 17:04:40
Eh. Fatalnie. Próbuję zastąpić...
[HTML] pobierz, plaintext 
  1. box-shadow: 0 0 5px 1px #464646;
  2. border-radius: 5px 5px 5px 5px;
[HTML] pobierz, plaintext

...obrazkami ale zupełnie mi to nie wychodzi.

Stworzyłem w GIMPie zwykły kwadrat z zaokrąglonymi rogami. Każdy taki róg wyciąłem i zapisałem jako osobny plik. W ten sposób powstało mi coś takiego:

t100.png; t010.png; t001.png
m100.png; m010.png; m001.png
d100.png; d010.png; d001.png

t - top; m - middle; d - down;

Powkładałem to w divy:
[HTML] pobierz, plaintext 
  1. <body style="padding: 5px;">
  2. 	<div style="width: 280px;">
  3. 		<div style="width: 5px; height: 5px; float: left; background-image: url(t100.png);">
  4. 		</div>
  5. 		<div style="width: 270px; height: 5px; float: left; background-image: url(t010.png);">
  6. 		</div>
  7. 		<div style="width: 5px; height: 5px; background-image: url(t001.png);">
  8. 		</div>
  9. 	</div>
  10. 	<div style="width: 280px;">
  11. 		<div style="width: 5px; height: 100px; float: left; background-image: url(m100.png);">
  12. 		</div>
  13. 		<div style="width: 270px; height: 100px; float: left; background-image: url(m010.png);">
  14. 		Tu wpisuje się tekst.
  15. 		</div>
  16. 		<div style="width: 5px; height: 100px; background-image: url(m001.png);">
  17. 		</div>
  18. 	</div>
  19. 	<div style="width: 280px;">
  20. 		<div style="width: 5px; height: 5px; float: left; background-image: url(d100.png);">
  21. 		</div>
  22. 		<div style="width: 270px; height: 5px; float: left; background-image: url(d010.png);">
  23. 		</div>
  24. 		<div style="width: 5px; height: 5px; background-image: url(d001.png);">
  25. 		</div>
  26. 	</div>
  27. </body>
[HTML] pobierz, plaintext

Żeby zmienić szerokość takiej ramki lub jej wysokość, muszę łącznie zmienić 8 parametrów. Nawet jeżeli pod menu na stronę, coś takiego można włożyć, to już jako na ramkę newsa się to zupełnie nie nadaje. Height w części dla m100, m010, m001 jest ustawiony na stałe więc tekst wychodzi poza ramkę. Chciałbym mieć możliwość aby szerokość całej ramki była zmieniana w jednym a nie w ośmiu miejscach. Przypominam, że na tabelkach takie rozwiązanie było bajecznie proste. Czy ktoś kiedyś zrobił coś podobnego w CSSie?
!*!
6.05.2012, 17:13:48
Cytat(by_ikar @ 11.04.2012, 11:02:32 ) *
Akurat w przypadku allegro obserwowałem dany temat i oni próbowali


Gdzie?
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.