Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> zaokrąglenia rogów w CSS a IE
olo707
post 10.04.2012, 20:58:29
Post #1





Grupa: Zarejestrowani
Postów: 77
Pomógł: 0
Dołączył: 30.03.2012

Ostrzeżenie: (0%)
-----

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ż
Go to the top of the page
+Quote Post
prowseed
post 10.04.2012, 21:46:39
Post #2





Grupa: Zarejestrowani
Postów: 433
Pomógł: 64
Dołączył: 29.01.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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


--------------------
portfolio | blog
Go to the top of the page
+Quote Post
batman
post 11.04.2012, 06:18:38
Post #3





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
Cytat(prowseed @ 10.04.2012, 22:46:39 ) *
natomiast co do Twojego problemu- nie ma opcji

Jak nie ma jak jest - http://css3pie.com/


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
by_ikar
post 11.04.2012, 08:37:42
Post #4





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
batman
post 11.04.2012, 09:07:04
Post #5





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
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ę.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
by_ikar
post 11.04.2012, 10:02:32
Post #6





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
prowseed
post 11.04.2012, 12:18:52
Post #7





Grupa: Zarejestrowani
Postów: 433
Pomógł: 64
Dołączył: 29.01.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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 :]


--------------------
portfolio | blog
Go to the top of the page
+Quote Post
niceaalbosmierc
post 6.05.2012, 17:04:40
Post #8





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 6.05.2012

Ostrzeżenie: (0%)
-----

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?

Ten post edytował niceaalbosmierc 6.05.2012, 17:05:35
Go to the top of the page
+Quote Post
!*!
post 6.05.2012, 17:13:48
Post #9





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----

Cytat(by_ikar @ 11.04.2012, 11:02:32 ) *
Akurat w przypadku allegro obserwowałem dany temat i oni próbowali


Gdzie?


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.04.2024 - 17:14
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn