Pozycjonowanie CSS źle działa "tylko" w Firefox 3.6.16

Dla specjalistów Webmastering
#1

Witam, bardzo proszę o pomoc, męczę się z tym od parunastu godzin i nie umiem naprawić. Otóż jest stronka:

http://gtagold.pl

Na Operze i innych przeglądarkach oprócz Firefoksa 3.6.16 wygląda tak:

http://dl.dropbox.com/u/16194115/opera-gta.jpg

Czyli jest dobrze.

Natomiast na Firefoksie 3.6.16 wygląda źle, na wersji 4.0 jest dobrze, ale 3.6.16 już nie. No przecież to nie jest stara wersja, to śmiech, aby strona nie była poprawnie wyświetlana, dlatego bardzo chcę to poprawić. Na 3.6.16 jest tak:

http://dl.dropbox.com/u/16194115/ff-gta.jpg

Kod wygląda tak:

Zapamiętaj mnie


[/code]


			

			[b]W pliku CSS:[/b] - na ten kod już nie patrzcie, umieściłem zaktualizowany w tym temacie w innym poście swoim ;)

[code].inputlogin {background: url(images/inputlogin.jpg) no-repeat; width:185px; height:29px; color:#0D0E0F; position:relative; top:53px; left:135px;} .inputpassword {background: url(images/inputpassword.jpg) no-repeat; width:185px; height:29px; color:#292929; position:relative; top:90px; left:-55px;} .zaloguj {background: url(images/zaloguj.png) no-repeat; width:50px; height:20px; position:relative; top:123px; left:-108px;} .zapamietaj{position:relative; left:-301px; top:124px; color:#fcfcfc; font-size:14px; font-family:Arial;} .zapamietajinput {position:relative; left:-305px; top:124px;}
Wyjaśnienie: inputlogin - pole nick inputpassword - pole do hasła zaloguj - przycisk OK do logowania zapamietaj - napis Zapamiętaj mnie zapamietajinput - ptaszek do zaznaczenia do opcji Zapamiętaj mnie _______________________________________________________________ Proszę o pomoc, nie mam pojęcia w ogóle jak to naprawić, męczę się z tym naprawdę kupę czasu. Sprawdzałem wszystko stąd, z różnymi jednostkami na każdej opcji i do każdej opcji.

http://www.kurshtml.boo.pl/css/pozycjonowanie.html
#2

Zacznij od tego: http://validator.w3.org/check?uri=http% … ne&group=0

Oraz tego: http://jigsaw.w3.org/css-validator/vali … lang=pl-PL

#3

Dzisiaj dosłownie cały dzień próbowałem naprawić ten błąd. No i prawie udało się, ale jeszcze nie jest ok. Dopasować do standardów W3C nie dam rady. Znam średnio standardy W3C, ale ta strona nie jest moja, tylko mojego znajomego, to on ją napisał. On nie zna standardów W3C, ja próbowałem naprawić te standardy, które potrafię, ale gdy naprawiałem to validator W3C wykrywał jeszcze więcej błędów, zamiast mniej.

No dobrze, ale z pewnością nie trzeba dopasowywać całej strony do standardów W3C, aby naprawić ten błąd, mianowicie:

Teraz ten panel logowania w panelu użytkownika wygląda dobrze na Firefox 3.6.16, Firefoksie 4 i innych przeglądarkach oprócz IE.

Na wszystkich oprócz IE 9 i 8:

http://dl.dropbox.com/u/16194115/inne-gta.jpg

A na IE 9 i 8 jest tak:

http://dl.dropbox.com/u/16194115/ie-gta.jpg

Za chiny nie potrafię tego naprawić, uwierzcie mi, morduje się niemalże cały dzień dzisiaj, próbowałem różne sposoby, ale nic z tego.

Nowy kod CSS odpowiadający za to:

#logo {background: url(images/logo/logo.php) no-repeat; overflow:hidden; width:960px; height:243px;}


.inputlogin {background: url(images/inputlogin.jpg) no-repeat; width:185px; height:29px; color:#0D0E0F; margin-left:135px;

position:absolute; top:68px;} 	 


.inputpassword {background: url(images/inputpassword.jpg) no-repeat; width:185px; height:29px; color:#292929; margin-left:135px;

	position:absolute; top:105px;}    


.zaloguj {background: url(images/zaloguj.png) no-repeat; width:50px; height:20px; margin-left:273px;

position:absolute; top:153px;} 

.menea { color:#ffffff; text-decoration: none; font-weight:bold; }

.menea:hover { color:#fcfcfc; text-decoration: underline; font-weight:bold; }


.zapamietaj{font-size:14px;font-family: Arial; color:#fcfcfc; margin-left:138px; position:absolute; top:153px;}


.zapamietajinput {margin-left:247px; position:absolute; top:153px;}

.loginin {position:relative; left:130px; top:53px; line-height: 13px;}

a.loginlinki { color:#ffffff; font-weight:bold;}

a.loginlinki:hover {font-weight:bold; color:#ffffff; text-decoration: underline;}

Kod poza CSS związany z tym, tu chyba się nic nie zmieniło:

Zapamiętaj mnie

[/code]

Zatem bardzo proszę o pomoc w umiejscowieniu tego tak, aby na również na IE było w porządku.

#4

Na IE to już nie problem, jeśli nie możesz z optymalizować kodu css pod wszystkie przeglądarki i wywala się w poszczególnych wersjach ie to możesz dodać w html w head instrukcje warunkowe, które doczytają z innych plików css poszczególne parametry dla konkretnej wersji internet explorera. Tu masz przykład:

http://funkcje.net/view/5/5668/index.html

#5

szpon5 , zacznij od umieszczenia całego poniższego fragmentu kodu wewnątrz znacznika

Zapamiętaj mnie
[/code]

Bo teraz masz to wewnątrz [b]

[/b] a powinieneś mieć wewnątrz

#6

krapikad, dziękuję za powiadomienie dla IE, no ale ja wolałbym, aby stronka poprawnie się wyświetlała. No chociaż na IE 8 i 9, na starszych to powiadomienie mi wystarczy. Przecież na IE9 i 8 to musi być poprawnie, nie może być, że na żadnym IE nie będzie poprawnie wyświetlana.

scripter1, albo ja źle robię, albo twoja rada nie pomogła. Ale ten kod wygląda u mnie inaczej trochę niż ten co ty zakodowałeś, jest go tam więcej. Może lepiej będzie jak dam pliki:

http://dl.dropbox.com/u/16194115/overall_header.tpl

Tutaj jest ten kod co dałeś scripter.

http://dl.dropbox.com/u/16194115/wstyle.css

No a tutaj jest CSS oczywiście i jest tam ten kod co dawałem w temacie.

#7

Ok, poprawiłem ci to co pisałem wyżej i przedefiniowałem ci DOCTYPE z HTML 4.01 Transitional na XHTML 1.0 Transitional - to jest podstawa więc jeśli to nie rozwiąże problemu to będzie się likwidować pozostałe błędy w kodzie.

Download overall_header.tpl from FileFactory.com

#8

Dziękuję, ten panel logowania już wygląda dobrze na IE i na innych. Ale niestety strona się sypie, ale tutaj ciekawostka.

Gdy w twoim pliku na początku jest to:

to panel logowania wygląda dobrze również na IE, ale za to strona tak o wygląda (screen oczywiście uciąłem, zrobiłem tylko screen tego co źle wygląda):http://dl.dropbox.com/u/16194115/gtagold.jpgNatomiast kiedy dam to co było na początku, czyli:

To strona wygląda ok, tylko ten panel logowania znowu jak przedtem, na IE się psuje. Strona tak powinna wyglądać jak poniżej:

http://dl.dropbox.com/u/16194115/gtagold2.jpg

Ale już idziesz dobrą drogą scripter, mam nadzieję, że jeszcze poprawisz tam coś i będzie dobrze :smiley:

#9

Problem w tym że w kodzie masz pomieszane fragmenty zgodne ze standardem HTML 4.01 Transitional z tymi w standardzie XHTML 1.0 Transitional a musi być cały kod strony zgodny z wybranym standardem i popoprawiać to co nie jest z tym standardem zgodne.

Jak pisałem zmieniłem ci definicję DOCTYPE bo wymagał tego użyty kod, zgodność ze standardem to podstawa.

Współczesne przeglądarki wybaczają wiele błędów webmasterów poprawiając w locie niektóre błędy ale niema standardu jakie błędy mają być przez przeglądarkę poprawiane i w jaki sposób i stąd wynikają różnice w wyświetlaniu niepoprawnie napisanej strony w różnych przeglądarkach.

Może postaraj się sam popoprawiać błędy zgodnie z tym co podpowiada ci validator do którego dałem ci linka.

#10

Ja tego nie dam rady sam uczynić. Znam średnio standardy W3C, ale z tym nie poradzę sobie, wszystko wyjaśniłem w drugim swoim poście tego tematu :wink: Dlatego tutaj proszę o pomoc. Może da się jakoś ułożyć ten panelek logowania bez dużego dopasowywania strony do W3C. Mi się udało już ułożyć go tak,że na wszystkich przeglądarkach wygląda spoko, tylko na IE ociupinkę zjeżdża na dół i tylko to. Kurcze, taki mały błąd na oko a tak wiele wymaga do naprawy, no w tym przypadku :P.

Czy nie uda ci się scripter jakoś tego dokonać? Jak wspomniałem, nie trzeba całkowicie dopasowywać do W3C, po prostu spróbuj jakoś ominąć to, aby było ok.

#11

I właśnie takie podejście mnie wkurza bo przez to mnożą się w sieci strony niezgodne ze standardami, normalnie szlak mnie trafia jak widzę że 90% stron jest napisanych niechlujnie.

A każdy dzieciak uważa się za speca od stron www bo udało mu się coś wymodzić w Pajączku…

Jutro zerknę ci w to…

#12

Tłumaczyłem, że strona nie jest moja. Gdybym ja zrobił, to by była całkowicie do W3C dopasowana. Nawet jakby miała być gorsza, ale przynajmniej dopasowana. Napisałem też już, że starałem się ją dopasować, ale kompletnie mi nie wychodzi. Z pewnością dlatego, że kod strony jest okropny i ja sobie z tym nie poradzę. A nie ma czasu tworzyć teraz innej strony. Ja się dowiedziałem o tej stronie i zacząłem w niej uczestniczył parę miesięcy po jej utworzeniu. Gdybym ja tworzył stronę to jak wspomniałem, byłaby dopasowana do W3C, albo chociaż gdybym z kolegą tworzył razem ją (dołączył do tworzenia) to też byłoby lepiej.

Dlatego już nie staram się tego dopasować, tylko zrobić tak, aby strona jakoś poprawnie działała.

Bardzo dziękuję

#13

szpon5 , widzę że chyba nadal nie kapujesz więc napiszę ci wprost: w większości przypadków to właśnie błędy powodują że strona różnie wygląda w różnych przeglądarkach bo przeglądarka dostaje błędny kod i nie wie co z nim zrobić ale próbuje jakoś się domyślić jak to powinno być.

Najpierw się poprawia błędy i dopiero jak już masz poprawny kod a wciąż coś jest nie tak to się szuka innej przyczyny.

Wrzuć ten plik na serwer zamiast tego co jest teraz i zobaczymy jak to wygląda.

Download overall_header.tpl from FileFactory.com

W tym pliku już błędy są popoprawiane i css z podanego przez ciebie wcześniej linka też jest ok ale możliwe że trzeba będzie jeszcze szukać błędów w innych plikach aby działało jak trzeba.

#14

scripter, no ja mówiłem, że popróbowałem poprawić kod, ale nie uda mi się, za bardzo jest nie estetyczny (szukałem odpowiedniego słowa).

Dziękuję, jednak niestety jeszcze nie jest dobrze, strona wygląda na wszystkich przeglądarkach tak:

http://dl.dropbox.com/u/16194115/gtagold-full.png

Jeśli mógłbyś, to bardoz proszę o dalsze spróbowanie naprawy tego. Jakby co, to poniżej daję screen jak strona powinna wyglądać:

http://dl.dropbox.com/u/16194115/gtagold2-full.png

Tylko nie patrz się na ten pasek informacją, że jesteś zalogowany. To jest taki dodatek, nie ma go w tym pliku overall co ty go masz.

Już nie pamiętam czy coś jeszcze zmieniałem w wstyle.css, ale chyba tak. Na wszelki wypadek podam też aktualny plik wstyle.css

http://dl.dropbox.com/u/16194115/wstyle.css

#15

Chodzi ci o to miejsce gdzie jest na górze “Rejestracja Zaloguj” :?:

W tym pliku co ci podesłałem kod jest już poprawny więc albo są jeszcze błędy w innych plikach albo trzeba doszlifować css (w css są ostrzeżenia i 1 błąd ale wszystko dotyczy definicji kolorów).

Masz to nad czym pracujemy gdzieś na serwerze co bym mógł sam podejrzeć jak to wygląda i wrzucić w validator?

Bo u mnie nie mogę podejrzeć nie mając wszystkich plików a ciężko się pracuje w ciemno…

– Dodane 06.04.2011 (Śr) 18:10 –

Może przejdźmy na PW albo lepiej na gg lub skype to szybciej będzie nam się pracowało.

#16

Mega wielkachny plus dla pana scripter1, bardzo mi pomógł przez GG, naprawił mi to co przez tyle się męczyłem. On też nie naprawił tego natychmiast, również męczył się z tym, nie wiem jak dziękować, mega pozytyw.