[XHTML] roznice miedzy przegladarkami

juz trace cierpliwosc ;(
we wszystkich normalnych przegladarkach (FF, Opera, Lynx) strona mi sie wyswietla poprawnie i ladnie, za to w IE, zeby sie tabelki nie rozjezdzaly, musialem dodac cellspacing do atrybutow (w normalnych przegladarkach wystarczy do CSS dodac jeden atrybut), ale juz wielkosci czcionek to paranoja! Wielkosci w menu i stopce ustawiłem w px (zeby sie nie dalo zmienic w przegladarce, bo uklad by sie rozwalil), ale w tresci dalem wartosci x-large, smaller itp, bo jak ktos ma wysoka rozdzielczosc, to nie przeczyta malutkich literek - w FF i Operze jest wszystko OK, a w IE sa jakby duzo wieksze :[.

A atrybut "border-spacing" w IE jest jakby ignorowany... zamiast 10px, wyswietla sie z 3...

proszę o podpowiedzi, co zmienić (najlepiej w CSS), żeby wyglądało tak samo w IE, jak w normalnych przeglądarkach (oprócz Lynxa ;))

adres: http://www.tomkiewicz.hostings.pl/

w sumie nie wiem, ale tak chciałem się zapytać jaka jest definicja normalnej przeglądarki (i czemu tam wstawiłeś opere [rotfl] ) bo dla mnie to jest chyba program który potrafi pobrać i wyświetlić chociaż prostą stronę internetową, z nienormalną się nie spotkałem ale sądze że była by to przeglądarka który by zawartość tłumaczyła od razu na ruski a całość była różowa bez możliwości zmiany koloru i w dodatku jeszcze do góry nogami ...

Adamo napisał(a)

jaka jest definicja normalnej przeglądarki

prosta:

przegladarka.normalna := (przegladarka.name != IE)
z tego wynika, ze Opera tez jest normalna :P. Poza tym przede wszystkim nie chce wywolac dyskusji, co lepsze, ale co zrobić, żeby dobrze wyglądało :-|

stosować się do standardów w3c i css2 P
Parktycznie wszystkie standardy sa pisane pod IE i zeby to dobrze wygladało i grało to specjalnie pod IE trzeba podawac wszystkie możliwe parametry

przypadkiem wpadłem na: http://www.gunlaug.no/contents/wd_1_03_04.html

SebaZ napisał(a)

Parktycznie wszystkie standardy sa pisane pod IE

Wolne żarty! Od kiedy to World Wide Web Consorcium pisze standardy tak, żeby to IE dobrze wyświetlała?

SebaZ napisał(a)

stosować się do standardów w3c i css2

taa? to jesli pisze XHTML 1.0 Transitional Valid, to znaczy ze jeszcze niezgodne jest? Jesli masz zamiar pisac takie brednie, to najpierw moglbys wejsc na podana strone, i sprawdzic, czy rzeczywiscie ignoruje standardy W3C :[

co do podanego linka - nie wiem, czy dobrze zrozumialem to, co tam pisze, ale wydaje mi sie, ze zalecaja oni stosowanie wielkosci czcionki w px... ja tego nie chce, bo jak ktos bedzie chcial wieksza czcionke, to moze sie zdenerwowac :P. Poza tym tam mowia, chyba bardziej o tym, ze w FF nie mozna malych czcionek uzywac, a ja mam problem z IE - tam czcionki sa duzo za duze :-|

Wolne żarty! Od kiedy to World Wide Web Consorcium pisze standardy tak, żeby to IE dobrze wyświetlała?

od nigdy ale zalezy żeby tam były dobrze wyświetlane

SebaZ napisał(a)

stosować się do standardów w3c i css2 P
Parktycznie wszystkie standardy sa pisane pod IE i zeby to dobrze wygladało i grało to specjalnie pod IE trzeba podawac wszystkie możliwe parametry

M$ jakas nowa propagande wprowadzil czy co :| :D
www.w3schools.com przeczytaj lekturke za nim palniesz kolejna bzdure ;)

co do IE to sie nie denerwuj tomkiewicz bo ta przegladarka zostala stworzona pod strony M$ :D na nich chodzi idealnie ;)

Jak się trochę człowiek pomęczy to nawet w IE może strona dobrze wyglądać - ale akurat największe problemy to ja mam zawsze z pozycjonowaniem divów (nieprawidłowym box-model IE)... ale nieważne :)

IE jest jaki jest - trzeba stosować hacki aby obejść jego słabości i nic z tym się nie da zrobić. Ale jak kogoś nie interesuje 80% internautów to może IE sobie lekko olać... Tutaj dużo zależy od profilu strony i "środowiska" jej odwiedzajacych - u mnie na przykład IE ma około 30%, a Fx około połowy ;)

Chciałbym zwrócić tylko uwagę na dwie rzeczy na tej stronie Tomkiewicza:

FireFox!

Firefox. To drugie wielkie F jest zbędne ;)

A na serio:

h1
 {
 font-family : Arial, Verdana, Tahoma;
 font-size : x-large;
 font-weight : bold;
 color : #0000AA;
 (...)
 }

h2
 {
 font-family : Arial, Verdana, Tahoma;
 color : #000099;
 font-variant: small-caps;
 (...)
 }

.text
 {
 (...)
 font-family : Arial, Verdana, Tahoma;
 font-size : small;
 border-spacing : 10px;
 }

O dziedziczeniu słyszałeś? Wystarczy dać w stylu body font-family, a zostanie on automatycznie przyznany wszystkim jego dzieciom - nie ma potrzeby deklarowania oddzielnie tych samych stylów. To tylko zwiększa rozmiar pliku niepotrzebnie.

Chyba, że chcesz, aby strona poprawnie działała pod Netscape 4.0, który dziedziczenia nie obsługuje ;) Zresztą sam też robiłem tak samo, a potem się dowiedziałem, że nie trzeba sie powtarzać :)

Przepraszam za offtopic, ale tak marudzicie jakie to ie jest potworne, a tak naprawde w niektórych przypadkach to opera i ff zachowuja sie niezrozumiale.

http://www.quirksmode.org/css/box.html

div.test
{
width: 300px;
padding: 10px;
}

taki div ma na IE 300px a na FF i Operze 310px.. dlatego trzeba na nich pisać dodatkowo ze chodzi nam o box-sizing: border-box i -moz-box-sizing: border-box;

bezsensu :P

//nie wiem po co napisałem tego posta.. chyba po prostu musiałem to z siebie wyrzucić ;)

ok, z problemem sobie poradzilem - drastycznie to drastcznie, ale zawsze... w FF jak ktoś chce, to i tak sobie czcionkę powiększy, w Operze powiększy całą stronę, a w IE NIE powiększy, ani o pixel - jak ktoś jest na tyle masochistą, żeby korzystać z IE, to i pomęczy się z mikroczcionką w 1600x1200 [diabel]

btw: dlaczego ten $#%^!# IE nie obsluguje CSS 2.0 :[

mysle nad tym, żeby zrobić akcję zmuszania ludzi na przechodzenie na dobrą stronę mocy - np. na mojej klasowej stronie zrobie skrypt, który po wykryciu, że ktoś wchodzi z IE, nie wyświetli strony, tylko tekst "ta strona jest przystosowana do oglądania w jakiejkolwiek innej przeglądarce niż IE" [diabel] Przynajmniej przekonam z 15 osob z samej klasy do zainstalowania FF :-]

Kooba napisał(a)

Przepraszam za offtopic, ale tak marudzicie jakie to ie jest potworne, a tak naprawde w niektórych przypadkach to opera i ff zachowuja sie niezrozumiale.

http://www.quirksmode.org/css/box.html

div.test
{
width: 300px;
padding: 10px;
}

taki div ma na IE 300px a na FF i Operze 310px.. dlatego trzeba na nich pisać dodatkowo ze chodzi nam o box-sizing: border-box i -moz-box-sizing: border-box;

bezsensu :P

Ech... To wina IE. Błąd w interpretacji box-modelu przez IE. Niestety, wielu twórców myśli właśnie, że to to co IE wymiaruje to jest dobrze - niestety nie. To Fx i Opera dobrze wiedzą, że w takim wypadku div ma 320 px (padding-left i padding-right).

IE6 w trybie standardów także ma zdaje się prawidłowy box-model - tylko w Quirks mode jest jak jest...

Swoją drogą więcej osób robi obejście nie poprzez box-sizing, a raczej poprzez box-model hack dla IE właśnie (metoda Tanteka):

div.content {
width: 400px;
voice-family: ""}"";
voice-family: inherit;
width: 300px;
}

i wtedy IE załapie tylko pierwszą wartość, a drugiej nie, po parsowanie CSS zatrzyma się po voice-family. A inne przeglądarki dostaną 400px ;)

See also:
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
http://tantek.com/CSS/Examples/boxmodelhack.html
http://nbw.jogger.pl/comment.php?eid=157210&startid=200510
"Rozdział" box-model tego wpisu.

[dodane po tym jak zobaczylem wpis tomkiewicza]

mysle nad tym, żeby zrobić akcję zmuszania ludzi na przechodzenie na dobrą stronę mocy - np. na mojej klasowej stronie zrobie skrypt, który po wykryciu, że ktoś wchodzi z IE, nie wyświetli strony, tylko tekst "ta strona jest przystosowana do oglądania w jakiejkolwiek innej przeglądarce niż IE" Przynajmniej przekonam z 15 osob z samej klasy do zainstalowania FF :-]

Broń Boże!! To chyba by było najgorsze co można zrobić... Too Cool for IE? Zastosuj infobar dla IE co najwyżej (http://browsehappy.pl/infobarwebmaster), ale nie blokuj, bo to jest głupie! Nie możemy popadać w skrajności!

A IE obsułguje CSS2. Nie cały (bo żadna przeglądarka nie ma pełnej implemetacji), ale coś tam obsługuje ;)

dobre z tym infobarem :-]

moze rzeczywiscie lekka przesada z tym blokowaniem, ale denerwuje mnie glupota ludzi korzystajacych z IE :-|. Sam przeszedlem na Firefoxa z przymusu (IE przestal mi dzialac), a jego najwieksze zalety odkrylem dopiero po kilkunastu minutach korzystania

Ktos napisał(a)

Kooba napisał(a)

div.test
{
width: 300px;
padding: 10px;
}

taki div ma na IE 300px a na FF i Operze 310px..

Ech... To wina IE. Błąd w interpretacji box-modelu przez IE. Niestety, wielu twórców myśli właśnie, że to to co IE wymiaruje to jest dobrze - niestety nie. To Fx i Opera dobrze wiedzą, że w takim wypadku div ma 320 px (padding-left i padding-right).
Popieram Koobę w całej rozciągłości.
skoro piszę:
div {width: 300px} to odczytuję to: element div ma szerokość 300px
tam nie ma content-width (czy czegoś podobnego) - jest samo width! czyli szerokość danego elementu.
Tworząc stronę chcę mieć div właśnie o takiej szerokości bez zabawy w matematykę, bez potrzeby odejmowania marginesów, paddingu, i bóg wie czego jeszcze :[
/* jestem zwolennikiem możliwie najlepszej adaptacji standardów, ale tutaj w pełni się zgadzam, że to jest nieintuicyjne. Ale w3c też to już zauważyła. Chyba w CSS3 jest już opcja ustawiania sposobu interpretacji - dryo*/

Piszę strony zgodnie ze standardami od pewnego czasu. Jak w wakacje pracowałem w Poznaniu i tworzyłem spory portal, to pisałem tak, aby wszędzie widzieć zielony ptaszek w Tidy w FF. Potem przeskodzyłem na IE i masakra, wszystko rozwalone.. więc ok, IE ma problemy z wyświetlaniem i ma stary silnik - ale akurat width wg moich odczuć traktuje sensownie. Chcę mieć 200px? daję width: 200px i mam 200px! a nie 220px, bo jakiś FF dodał padding i mi stronę rozwala :/

To chyba jedyne 2 rzeczy, co są dla mnie poronione w nowych standardach: brak target i to width/height

No sorry, ale jak kupujesz monitor 19" to ile cali on ma? Sam ekran ~19" + obudowa. Prostestujesz przeciwko temu, że cały monitor ma inną przekątną (dochodzi obudowa)? Nie, bo i po co, prawda?

Qyon napisał(a)

No sorry, ale jak kupujesz monitor 19" to ile cali on ma? Sam ekran ~19" + obudowa. Prostestujesz przeciwko temu, że cały monitor ma inną przekątną (dochodzi obudowa)? Nie, bo i po co, prawda?
Sorry, ale co ten argument ma do (X)HTMLa? Bo nie bardzo kumam 8-|

Przecież nie wypisuje się przekątnej monitora ale przekątną ekranu.
Argument w stylu "You forgot the Poland"...

ale ja nie bardzo rozumiem, po co nowe standardy ? wszystko działa, sieć jest, strony są, działają, wyświetlają się ładnie, jest możliwość użycia np javascript'u żeby coś było bardziej dynamiczne i czego brakuje WWW ? no bo ja nie wiem co tu można dodać, to żeby wszyscy przerobili swoje strony na divy zamiast tabelek żeby było ładnie w kodzie ? mi wystarczy żeby było. wszystkie protokoły chcą zrobić w jeden, jak są zapotrzebowania na jakieś nowe dane przesyłane siecią to IMO powinni wprowadzić nowy protokół jak już a nie prostą rzecz - WWW czyli prosty dokument tekst + grafika zamieniać w nie wiadomo co. A pliki to się przykładowo nie pobiera już z serwerów ftp przeznaczonych do tego - no bo po co, wszystko ładowane na serwer www, który powinien chyba przesyłać dane tekstowe a nie binarne. A tak se napisałm bo mi się nudziło ;P

No sorry, ale jak kupujesz monitor 19" to ile cali on ma? Sam ekran ~19" + obudowa. Prostestujesz przeciwko temu, że cały monitor ma inną przekątną (dochodzi obudowa)? Nie, bo i po co, prawda?

ale porównanie, monitor 19'' znaczy że ekran tyle ma a że kawałek się chowie pod obudową to już nie ważne, w LCD widać już cały ekran - chociaż nie wiem kto wymyślił żeby liczyć to czego nie można dostać (wykorzystać) bo jest schowane częściowo pod obudową ale to inna bajka i nie związane raczej z HTML'em.
a dobre porównanie to by było jakbyś poprosił monitor o szerokości (nie przekątnej) 40 cm, z czego obudowa ma zajmować po 4 cm z każdej strony a dostał monitor 48 cm - chociaż już wtedy jest bez sensu więc porównywanie HTMLa z monitorem to niezbyt dobry pomysł ...

dobrze, wszystko dobrze, jak się wpisuje w delphi np że forma ma mieć Width 200px to tyle ma - w tym obramowanie i wszystko, a jak się wpisze ClientWidth na 200px to zawartość ma tyle + jeszcze obramowanie, więc w html powinno być tak samo a jakiś świr naprawdę wymyślił że nie wiem - że będzie może mniej liczenia jak Width => ClientWidth albo że może bardziej intuicyjnie będzie można pisać strony ?

Uzmysławiam Ci, że chyba potocznie rozumiesz "szerokość" elementu...

Potocznie?
Szerokość to gabaryt w szerz od krańcowej granicy do krańcowej granicy elementu. Nie wiem, do czego zmierzasz...

To jest nonsens, kompletny brak intuicyjności, po co komu taki width? Gdy pozycjonuje strone, potrzebuje okreslonej szerokości co do piksela, teraz robie sobie padding i strona sie rozłazi..

Co sie dzieje? :O standard sieciowy mnie zaatakował! ;(

Trzeba poszukać w kodzie width i odjąć od niego 2*padding.. następna niespodzianka, twórcy firefoxa zaimpletowali takie rozmiaraowanie zeby być zgodnym ze standardem, ale atrybutu box-sizing juz nie.. zrobili sobie -moz-box-sizing [sciana]

Co innego gdyby border-box był wartością domyślną, a hardkorowcy by sobie używali content-box..

Ja rozumiem ze standardy sieciowe są fajne, ale w niektórych sprawach w3c przesadza, a ludzie ślepo wychwalają wszsytko co oni powiedzą.

No z tym width i padding to prawda. Aby okreslic dokladnie dlugosc od dlugosci width trzeba odjac padding. A najgorsze gdy chcesz, zeby jeszcze przegladarka IE w wersji 5 dobrze to odbierala. Tam znowu width i padding dziala jak by sie wydawalo. Czyli dajesz width np. 200px to padding tego nie powieksza.

Atrybuty z perfiksem -moz to atrybuty testowe.

kurde, ale klotnia sie zrobila :P

mam jeszcze jedno pytanko: macie jakis mini-poradnik jak przesiasc sie z tabelek na DIVy??

EDIT: i czy strona na DIVach poprawnie mi sie wyswietli na starych przegladarkach / telefonach typu 9210 bez-i? (bo 9210i ma juz opere:))

tomkiewicz napisał(a)

EDIT: i czy strona na DIVach poprawnie mi sie wyswietli na starych przegladarkach / telefonach typu 9210 bez-i? (bo 9210i ma juz opere:))

no własnie ze teoretycznie wyświetli Ci sie dużo lepiej na prymitywnych przeglądarkach.. między innymi po to jest to całe zamieszanie z xhtml'em i div'ami

W praktyce też - na przeglądarkach tekstowych i starszych zobaczysz po prostu piękny tekst, a nie głupio umiejscowione elementy w tabelkach.

http://osiolki.net/tabelki/ -> tu coś jest o tabelkach i divach

Ktos napisał(a)

W praktyce też - na przeglądarkach tekstowych i starszych zobaczysz po prostu piękny tekst, a nie głupio umiejscowione elementy w tabelkach.

czyli że po prostu się nie wyświetli ułożenie, to ma być plus ??

jeszcze wroce do tematu zmuszania uzytkownikow do wyboru przegladarki - to, co zobaczylem wczoraj wieczorem, to juz maksymalne przegiecie :[

Jakies dwa miesiace temu bylem u stryjka, zeby kolejny raz zreinstalowac system... wiedzac, ze stryjek ma zamiar zalozyc niedlugo internet, zainstalowalem firewalla (Zone Alarm Pro), antywirusa (Avast Home) i Mozille Firefox. Żeby nikomu nie przyszło do głowy korzystać z IE, pousuwałem skąd się da skróty do niego i powiedziałem, żeby korzystali z FF...

Wczoraj znowu bylem w odwiedzinach, bo kilka rzeczy nie dzialalo... Okazalo sie, ze jak przyszedl jakis partacz od zakładania internetu, wygrzebał spod ziemi IE i potworzył skróty do niego w kilku miejscach, oświadczając, że "tym przyciskiem się wchodzi do internetu". Efekt? Próbując przywrócić do życia GG, wyłączyłem firewalla, dzięki czemu uaktywniła się osłona sieciowa avasta - nie minęło 5-10 sekund, a avast zaczal krzyczec, ze odparl atak costam.worm.costam... Dalszych komunikatow nie mialem cierpliwosci czytac :[

Adamo napisał(a)

czyli że po prostu się nie wyświetli ułożenie, to ma być plus ??

Na komórce z 3 calowym wyświetlaczem, na czytniku dla niewidomych, przeglądarce tekstowej, archaicznej przeglądarce w muzealnym komputerze, bocie wyszukiwarki internetowej.. spokojnie odczytają zawartość strony i to jest zdecydowany plus!

Strony w XHTML+CSS nie tracą nic na wyglądzie, a są lepiej przemyślane, łatwiejsze w modyfikacji i lepsze dla egzotycznych przeglądarek.. IMHO warto tak pisać ;)

Można też pisać w XML+XSLT+CSS :> Ale to raczej wtedy, gdy strona ma wyświeltać jakąś bazę, lub coś powtarzalnego strukturalnie.
Przykład: http://marooned.neostrada.pl/4prog/ :)
To taki mini-OT.