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

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

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...)

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


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


Ja tez.

To dobrze . Sry, ale nie ogladalem kodu, tylko staralem sie opisac roznice jakie dostrzeglem...

Dzięki za zainteresowanie tematem

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)

U mnie wyglada tak samo jak na screenach.

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


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".


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 .


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.


Moze powiesz ze jestem slepy ale tutaj imho jest idealnie tak samo w tych dwoch przegladarkach . 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).


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


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

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.

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.