Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: XHTML Strict, CSS - Zgodność z przeglądarkami
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Zodiac
Witam!

Od wczoraj modyfikuje swoją stronę z HTML 4.1 na XHTML 1.0 Strict. Nie jest to jeszcze ostateczna wersja. Validator stwierdza brak błędów, jednak nie mogę poradzić sobie z poprawną obsługą CSS.

Wszystko działa sprawnie pod Operą i IE, jednak Mozilla odmawia współpracy. Problem leży w obsłudze grafik - w CSS jestem zielony, więc nie mam pojęcia jak to ugryźć. Czy mogę liczyc na jakieś sugestie i rady?

Adres strony będącej w budowie:
http://majestic.gry-online.pl/maj_nowy/

Pozdrawiam
Zodiac
Dominik
Cytat
Wszystko działa sprawnie pod Operą i IE, jednak Mozilla odmawia współpracy. Problem leży w obsłudze grafik - w CSS jestem zielony, więc nie mam pojęcia jak to ugryźć. Czy mogę liczyc na jakieś sugestie i rady?

Ale moze jakies konkrety... pokaz na screenie co jest zle wyswietlane. Bo ogladam stronie pod Mozilla i IE dla mnie (moze nie jestem uwaznym widzem) ale wyglada identycznie. Podaj wersje Mozilli.

BTW. Czemu dajesz dokumentowi starus standalone="no" skoro jest yes winksmiley.jpg
Paul
Cytat
Bo ogladam stronie pod Mozilla i IE dla mnie (moze nie jestem uwaznym widzem) ale wyglada identycznie.

Ja widze wyraznie:
:arrow: Na mozilli ramki newsow sa troche rozjechane tzn. napisy top news i najswiezsze nie sa rowno z ta ramka jak w ie. Takze na mozilli jest mniej wiecej dwuktotny przyrost interlini...
:arrow: Po prawej w ramce ostatni mecz obrazki sa wycentrowane na ie, na mozilli nie.

U Ciebie, Dominik, tez musi tak to wygladac, bo jak widac po User Agent wersje Mozilli mamy takie same... (no chyba, ze masz innego ie... - ja mam ie6 plus wszystkie windowsupdate...)
Dominik
Cytat
:arrow: Na mozilli ramki newsow sa troche rozjechane tzn. napisy top news i najswiezsze nie sa rowno z ta ramka jak w ie. Takze na mozilli jest mniej wiecej dwuktotny przyrost interlini...

No to widzialem ale nie ma to nic wspolnego z obrazkami. Poza tym to Mozilla poprawnie sie zachowuje bo jest line-height: 12px;

Cytat
:arrow: Po prawej w ramce ostatni mecz obrazki sa wycentrowane na ie, na mozilli nie.

A tego to ja nie widze. Moze ktos screena zrobi i zaznaczy co jest inaczej.

Cytat
no chyba, ze masz innego ie... - ja mam ie6 plus wszystkie windowsupdate...)

Ja tez.
Paul
Cytat
Poza tym to Mozilla poprawnie sie zachowuje bo jest line-height: 12px;.

To dobrze smile.gif. Sry, ale nie ogladalem kodu, tylko staralem sie opisac roznice jakie dostrzeglem...
Zodiac
Dzięki za zainteresowanie tematem smile.gif

Postaram się sprecyzować co nie działa pod Mozillą, podając przykłady razem z kodem:

1. Wszelkie grafiki są przesunięte w lewo, a powinny byc wyśrodkowane. W pozostałych przeglądarkach wystarczy wpis:
td { text-align: center; }

2. Grafiki z menu mecze. Znowu przesunięcie w lewo, to samo co powyżej.

3. Tekst, ma byś w środku tabeli, jest przesunięty w lewo. Kod za to odpowiadajacy to:
.news {
width: 98%;
text-align: justify;
font-size: 7pt;
color: #CCBCA7;
line-height: 12px
}

4. Nieprawidłowy odstęp pomiędzy treścią i tytułem / autorem. Kod jest następujący:
.row_tytul, {
height: 22px;
vertical-align: middle;
text-align: left;
line-height: 12px;
}
.tytul {
margin-left: 6px;
font-size: 8pt;
color: #CCBCA7;
}
.row_autor{
width: 30%;
height: 22px;
vertical-align: middle;
text-align: right;
line-height: 12px;
}
.autor {
margin-right: 7px;
font-size: 7pt;
color: #7B5751;
}

5. Źle wycentrowany obrazek. Normalnie (w IE i O) wystarczy ustawienie jak w punkie 1.


I pytanie główne. Na czym sie opierać budując strony w XHTML? CSS wygląda w każdej przeglądarce inaczej. Skupiam się na działaniu kodu w IE i Operze, ale przez szacunek dla userów majacych inne przeglądarki chciałbym, by wszystko działało i wyglądało jak powinno również w Mozilli i innych.

-----
I grafiki, zapomniałem:

Strona pod Mozillą

Strona pod IE
-----
Zmoderowane: Własne posty można edytować. (scanner)
Paul
U mnie wyglada tak samo jak na screenach.
Dominik
Cytat
1. Wszelkie grafiki są przesunięte w lewo, a powinny byc wyśrodkowane. W pozostałych przeglądarkach wystarczy wpis:
td { text-align: center; }

Szczeze mowiac to nadal nie widze o co chodzi ale strzelam zeby dodac co selektora img margin:auto

Cytat
2. Grafiki z menu mecze. Znowu przesunięcie w lewo, to samo co powyżej.

Tutaj widze o co chodzi i nie powinno byc text-align tylko margin:auto w selektorze img. Musisz zrozumiec roznice miedzy wysrodkowaniem "zewnetrznym" i "wewnetrznym".

Cytat
3. Tekst, ma byś w środku tabeli, jest przesunięty w lewo.

Tutaj pomimo ze precyzyjnie okresliles nie moge znalesc. Albo sie nie zrozumielismy albo sie pomyliles. Moze chodzilo o przesuniecie w prawo? A moze to ja zle zrozumialem, bo nawet linijka mierzylem i jest identycznie jak w IE smile.gif.

Cytat
4. Nieprawidłowy odstęp pomiędzy treścią i tytułem / autorem.

To wynika z bledow w IE i Opery, ktora zeby byc zgodna powiela bledy IE. Chodzi o to ze IE przelacza sie w tryb Quirks a nie Strict (IE gubi sie jak zobaczy w pierwszym wierszu deklaracje XML-a). Wiec zachowanie Mozilli jest jak najbardziej poprawne, ten odstep powinien byc. Dowod: zmiec DTD na transitional i w Mozilli bedzie tak samo jak w IE.

Cytat
5. Źle wycentrowany obrazek. Normalnie (w IE i O) wystarczy ustawienie jak w punkie 1.

Moze powiesz ze jestem slepy ale tutaj imho jest idealnie tak samo w tych dwoch przegladarkach smile.gif. Nie wiem o co chodzi, szczegolnie ze w tym miejscu co zaznaczyles nie ma obrazka wiec jak moze byc cos zle? (obrazek jest na calej dlugosci a nie tylko na 1/10).

Cytat
Na czym sie opierać budując strony w XHTML?

Rozumiem, ze pytasz o tabelki lub div'y. Oczywisice o Divy.

Cytat
CSS wygląda w każdej przeglądarce inaczej.

Nie, poprawnie zaprojektowana strona bedzie wygladala tak samo w kazdej przegladarce. Jesli wyciagasz wniosek na podstawie swojej strony to musze Ci powiedziec, ze strona jest zle wyswietlana bo jest zle zrobiona. Nie obraz sie ale to ze strona przechodzi przez walidator to nie znaczy ze jest poprawnie zrobiona. Trzeba jeszcze ja zaprojektowac logicznie, a u Ciebie niestety z tym jest tragicznie. Co to jest logika zapytasz? Podam Ci przyklad banalny na podstawie Twojej strony jednak nie zwiazany z poprawnoscia wyswietlania ale mysle ze latwiej mozna bedzie zrozumiec. Na stronie jest tlo czarne a obrazki z tematami sa na ciemno brazowo? Czy tak powinna byc zaprojektowana strona logiczna? Nie, bo nikt nawet tego po wejsciu na nia nie zobaczy, dopiero jak zblizy glowe na 10cm do monitora rozczyta to tam jest napisane na obrazku. To jest na przykladzie logicznosc (a nie tylko gramatyka). Twoja strona nie jest calkowicie zgodna z W3C WAI. Jesli by byla napewno niemialbys problemow z przegladarkami. A teraz przejde do setna: kod jest tak niespojny ze przegladarka na prawo sie zgubic, spojrz na style, powiedz czy pamietasz dziedziczenie dowolnego elementu, ktory Ci pokaze. Odpowiedz brzmi: nie.
A nawet sama gramatyka jest zlechana, spojrz na DTD, odwolujesz sie do definicji, ktore znajduja sie http://majestic.gry-online.pl/maj_nowy/DTD...tml1-strict.dtd chyba nie trudno sie domyslac ze tam tego pliku nie ma, bo jest http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd . I teraz powiedz skad przegladarka ma wiedziec co chciales jej powiedziec? To samo ze standalone ale powiedz czy poprawny parser XML-a w przegladarce ma zgadnac ze to bzdura i trzeba to ominac. I tak mozna jeszcze przez dzisiec stron...
Zodiac
Dzięki za rady, jak napisałem na wstępnie - w CSS jestem zielony i dopiero uczę siego stosować. Stąd problemy, rzecz wydaje mi sie normalna dla początkującego. smile.gif

Co do strony graficznej - nie ja się nią zajmuje. I owszem, mnie nie odpowiada, sam uważam że należy ją mocno zmodyfikować. Co też zrobimy w swoim czasie. Ja chcę skupić się na nauce XHTML i CSS.

Teraz również na Mozilli powinno być OK.
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.