Css w Firefoxie

[Piotrekziom]

Mam pewien problem z wyświetlaniem strony na Mozilli.
Oto strona:
http://www.p-e-m.yoyo.pl/formacja.php?lookup=1

W Ie wszystko wygląda tak jak powinno(tzn. numerki są na środku pomarańczowego kółka na boisku), natomiast w Mozilli strona wyświetla się błędnie - numerki są znacznie wyżej niż w IE i wygląda to trochę dziwnie.

Kod odpowiadający za styl inputu z numerkiem.

Kod: Zaznacz cały

<style type="text/css">
<!--
.team {
font-family : tahoma;
border : 0;
font-size : 11px;
font-weight : bold;
width : 23px;
height : 24px;
line-height : 23px;
text-align : center;
margin : 1px;
background : url(kolos.gif) no-repeat center left;
}


-->
</style>

Input z numerkiem

Kod: Zaznacz cały

<input class='team' value='".$data['gracz6']."'><br><span style='font-size:9px;color: white;font-weight:bolder;'>".$dataz6['zawodnik']."$kapt6</span>

Co należy dodać aby strona w Mozilli wyświetlała się tak samo jak w IE?

[marcin_f]

Po 1. NTF (nie To Forum) i zaraz jeden z modów przeniesie w odpowiednie miejsce.
Po 2. IE ma wiele błędów obsługi CSS, w tym niezgodny ze standardem box model, więc to w Fx wyświetla się prawidłowo, a w IE nie. W ogóle implikowanie, że w IE działa tak, jak chcesz, więc wina jest po stronie innej przeglądarki, jest z gruntu niewłaściwym podejściem.
Po 3. w Operze żadnych pomarańczowych kółek nie widzę (a obrazek kolos.gif na pewno nie jest blokowany), więc po prostu zacznij od nowa i napisz porządny kod; potem na jakimś forum poświęconym HTML i CSS czy na grupie pl.comp.www możesz poszukać informacji, co zrobić, by również IE wyświetlał ten kod zgodnie z Twoimi życzeniami.

[Tomek]

1 - yhm
2 - a jak przeglądarka ma interpretować coś co jest w komentarzu? <!-- --> - usuń znaczniki komentarza. Proponuję mimo wszystko poczytać specyfikację css, html i może jakiś kurs?
3. W tym przypadku, jak zawsze zresztą, IE nieprawidłowo wyświetla...

[Piotrekziom]

Już nie pierwszy raz pisze na tym forum i znów nikt mi nie potrafi pomóc. Coraz bardziej utwierdzam się w przekonaniu, że nie warto męczyć się nad dostosowywaniem stron pod Fx. Wielkie Dzięki.

Można usunąć.

[Tomek]

Człowieku - przecież dostałeś odpowiedź! Dlaczego jej nie zastosujesz tylko narzekasz?
Masz kod css wpisany w komentarzu - więc nie dziw się że nie działa!

<style type="text/css">
<!--
.team {
....
}


-->
</style>

Widzisz? Dostałeś informację że masz to usunąć - pkt 2. z mojego wcześniejszego postu.
poza tym - stron się nie dostosowuje do Fx. Strony mają być zgodne ze specyfikacją CSS i (x)HTML. Jeśli musisz je dostosowywać dla Fx - cóż... oznacza to że naprawdę warto by trochę czasu więcej poświęcić nad specyfikacjami i kursami html i css. Fx ma jedną z najlepszych interpretacji CSS i HTML, o włos przed nim jest Opera i Konqueror - o gruby włos - Safari - IE jest natomiast jakieś 10 lat wstecz! W tym konkretnym przypadku to Fx poprawnie wyświetla BŁĘDNIE napisaną stronę. Natomiast IE wyświetla błędy... Strona po prostu jest źle napisana i zawiera błędy. Nic więcej ani nic mniej - Fx nie ma tu nic do rzeczy.
Zanim następnym razem zadasz pytanie - sprawdź stronę w walidatorach css i html!

[Piotrekziom]

Usunąłem komentarz i nic się nie zmieniło. Poza tym sprawdzałem strone validatorem css i i nie wykrył błędów.

[Tomek]

a walidator html? masz [url=http://validator.w3.org/check?uri=http%3A%2F%2Fwww.p-e-m.yoyo.pl%2Fformacja.php%3Flookup%3D1&charset=%28detect+automatically%29&doctype=Inline&group=0]40 błędów
[/url] wśród nich m.in:

Line 53, Column 16: document type does not allow element "STYLE" here.

<style type=text/css>

✉

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

Dopiero teraz zajrzałem w kod - masz element style w body a nie w head! to podstawowy błąd!
Dobra uwaga na przyszłość - zanim zaczniesz mówić że Fx źle wyświetla stronę... sprawdź ją walidatorami (css i html!)

//edit: a w kod zajrzałem dopiero teraz bo wydaje mi się oczywiste że zanim się powie że coś nie działa, samemu się sprawdza...

[rumsztyk]

no to brawo PiotrekZiom

strona bezbłędna a co sprawdzasz - masz tam ramkę to stara sprawa gdy ramka główna to "2 linijki" kodu i już trzeba wyjątkowej nieudolności aby ją zepsuć, ale strona w ramce błędy już ma sprawdź sam.
Twój kod

Kod: Zaznacz cały

<style type="text/css">
<!--
.team {
font-family : tahoma;
border : 0;
font-size : 11px;
font-weight : bold;
width : 23px;
height : 24px;
line-height : 23px;
text-align : center;
margin : 1px;
background : url(kolos.gif) no-repeat center left;
}


-->
</style>


popatrzmy
height: 24 px
line-height: 23px;
czyli jak masz ciężarówkę o pojemności 3m2 to twierdzisz że da radę tam upchnąć kredens z 3 szufladami z których każda ma 2,9m2
powodzenia. Zastanów się tylko, że pojeździsz nią góra dwa lata bo powstanie IE8 który wyświetli stronę tak jak Fx 1.1 czyli upraszczając niuanse - poprawnie a Ty będziesz szukał forum na którym napiszesz:
"widzę, że nie ma sensu robić stron pod IE8, Fx, Operę itd."
IE7 i IE6 rządzą - dobrze wyświetlają moją wirtualną niewymiarową ciężarówkę.

Tak powinna wyglądać Twoja ciężarówka:

Kod: Zaznacz cały

<style type="text/css">
.team {
font-family : tahoma;
border : 0;
font-size : 11px;
font-weight : bold;
width : 23px;
padding: 5px;
text-align : center;
margin : 1px;
cursor: default;
background : url(kolos.gif) no-repeat center left;
}
</style>


i nie wiem czy w IE się nią pojeździ - nie interesuje mnie to

[Piotrekziom]

Dzięki rumsztyk.
Użyłem kodu podanego przez Ciebie - strona poprawnie wyświetlała się w Fx, źle w Ie, ale troche go przerobiłem i wyświetla się dobrze w obu przeglądarkach. Dzięki.