Podstrony
- telcocafe
- [HTML] Logowanie do ftp poprzez pole tekstowe Jak zrobić logowanie do ftp poprzez pole
- [HTML] Zła pozycja obrazka tła w tabeli Zła pozycja obrazka tła w komórce tabeli
- Darmowe statystyki odslon banera dla strony .html Czy istnieja statystyki odslona banera n
- [html] Newsy i suwak - jak to zrobić? Jak zrobić suwak?
- [HTML] Miejsce pod formularzem Jak usunąć miejsce pod formularzem?
- [HTML] '*' == ?
- Usuwanie zbednych linijek kodu Program do usuwania linijek html
- [HTML] Formularz liczący punkty Coś w rodzaju testu liczącego punkty ;)
- [html] Polskie znaki Po wsadzeniu banera, zniknęły polskie znaki
- [html]W jakiej technice zrobić stronkę? Jestem grafikiem a chce zrobić stronkę....
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- taatry.keep.pl
telcocafe
Przykład: http://img63.imageshack.us/img63/4157/aaapg.pngDotychczas wszystkie obrazki znajdowały się w wielu plikach. Każdy przycisk był znacznikiem <img>. Aby przyspieszyć ładowanie edytora, złączyłem ikony w 1 plik. Teraz pojawia się problem.
<span>, ale nie w IE 6/7
Każdy przycisk jest opisany znacznikiem <span> ze stylami:background-image: url(img/editor.png); background-repeat: repeat-y; /*obrazki ułożone pionowo w pliku */ background-position: center 16px; /*odpowiednia_wartosc_liczbowa*/ padding: 3px 12px;Firefox wyświetla przyciski poprawnie, IE 8 też, ale IE 6 i IE 7 nie dają rady.
1 wielki <div>
Wpadłem na inny pomysł. Edytor jest 1 wielkim znacznikiem <div> z obrazem tła. Ma przypisane zdarzenie onclick. Na podstawie (wewnętrznych dla obiektu) współrzędnych kursora w czasie kliknięcia skrypt identyfikuje, który to przycisk. Ikony w pliku .png są już rozmieszczone tak, jak trzeba. Wczytanie takiego edytora nie wymaga nawet wielu operacji.
Niestety jest wada takiego rozwiązania. W ostatniej chwili stwierdziłem, że nie da się nadać stylów :hover dla poszczególnych przycisków ani wyświetlić podpowiedzi (atrybut TITLE).
Co zatem?
Wiem, że można zastosować <div>, <ul> czy cokolwiek i nadać styl float: jednak wolałbym nie kombinować za bardzo.
Użytkownik Ferrari edytował ten post 28 grudzień 2009, 14:05
Wiem że na 100% idzie zastosować inny arkusz css (aby stare ie obsługiwało). Był jakiś znacznik.
edit:
znalazłem :
<!--[!IE 8]>
Kod dla wszystki wersji oprócz IE 8
<![endif]-->
źródło: http://mynthon.net/a...s/szybkie_hacki
I teraz trzeba by opracować odpowiedni styl dla starych wersji IE
Użytkownik Qenix edytował ten post 28 grudzień 2009, 16:18
Przykład:
Dotychczas wszystkie obrazki znajdowały się w wielu plikach. Każdy przycisk był znacznikiem <img>. Aby przyspieszyć ładowanie edytora, złączyłem ikony w 1 plik. Teraz pojawia się problem.
<span>, ale nie w IE 6/7
Każdy przycisk jest opisany znacznikiem <span> ze stylami:background-image: url(img/editor.png); background-repeat: repeat-y; /*obrazki ułożone pionowo w pliku */ background-position: center 16px; /*odpowiednia_wartosc_liczbowa*/ padding: 3px 12px;Firefox wyświetla przyciski poprawnie, IE 8 też, ale IE 6 i IE 7 nie dają rady.
1 wielki <div>
Wpadłem na inny pomysł. Edytor jest 1 wielkim znacznikiem <div> z obrazem tła. Ma przypisane zdarzenie onclick. Na podstawie (wewnętrznych dla obiektu) współrzędnych kursora w czasie kliknięcia skrypt identyfikuje, który to przycisk. Ikony w pliku .png są już rozmieszczone tak, jak trzeba. Wczytanie takiego edytora nie wymaga nawet wielu operacji.
Niestety jest wada takiego rozwiązania. W ostatniej chwili stwierdziłem, że nie da się nadać stylów :hover dla poszczególnych przycisków ani wyświetlić podpowiedzi (atrybut TITLE).
Co zatem?
Wiem, że można zastosować <div>, <ul> czy cokolwiek i nadać styl float: jednak wolałbym nie kombinować za bardzo.
Zastosuj mape odsylaczy
TinyMCE oparł CSS Sprite o tabelki, CKEditor o opływające spany. Dlaczego Ty tak kombinujesz i nie przyjrzysz się sprawdzonym rozwiązaniom?
Mapa odsyłaczy odpada. Dużo problemów. Chociaż może to nie jest zły pomysł? Zaraz zajrzę do "sprawdzonych rozwiązań" :D
@statjacek: po co cytujesz cały post?
Użytkownik Ferrari edytował ten post 28 grudzień 2009, 22:23
Czy IE 8 w trybie kompatybilności wyświetla stronę dokładnie tak jak IE 7, czy cofa się do IE 6 / 5?
Opisuję przyciski znacznikiem <div> zamiast <span>, ale powstał kolejny problem.
Każdy <div> ma style:float: left; height: 16px border: 1px solid #F7F7F7; padding: 3px;
Dodatkowo ustawiam za pomocą Javascript style:var b = document.createElement('div'); b.style.backgroundPosition = 'center -22px'; //przykładowo -22px b.style.padding = '3px 12px';
Ustawienie display: inline-block skutkuje nieprzewidywalnymi efektami, a IE 6 i tak go nie obsługuje.
Przyciski są wyrównane do lewej. Nie pomaga text-align: center ani margin: auto w nadrzędnych elementach.
Czy jest jakieś rozwiązanie bez ustalania długości width edytora?
Właściwie opisywanie przycisków za pomocą <span> jest najlepszym wyjściem. Przydałby się tylko hack dla IE.
Użytkownik Ferrari edytował ten post 08 styczeń 2010, 19:33
Kombinujesz odrzucając działające rozwiązania - wyłącznie twój problem - to ty popełniasz błąd "przedwczesnej optymalizacji" i tracisz rok na pierdołę.
Chyba nikomu nie przeszkadza czas ładowania małych ikonek edytora, co więcej praktycznie nikt teraz w branży nie uwzględnia IE5, a i zazwyczaj wsparcie dla IE6 jest porzucone. Chcesz bezsensowną obsługę IE5? Męcz się sam.