Problem z przeglądarką - optymalizacja strony pod kątem Mozilla Firefox

[EndlessRain]

Mam problem. Mój zin współpracuje ze wszystkim przeglądarkami internetowymi, tylko nie z Mozillą Firefox, która w ogóle nie grafiki i ogólnie ukłądu strony zinu. Internet Expolrer i Opera wyświetlają idealnia, jedynie w Firefoxie leży problem. Czy ktoś z Was ma pomysł, gdzie leży problem? Zapewne w jakimś miejscu kodu, ale nie mam pojęcia w jakim. Z góry dziękuję za pomoc.

[barmazu]

A w czym dokładnie problem? Daj jakiś zrzut/link czy coś....

[EndlessRain]

Tak powinno wyświetlać.

Prawidłowo

Tak nie powinno wyświetlać, dzieje się tak tylko w Mozilli Firefox

Nieprawidłowo

A to początek kodu html kącika

Kod

[barmazu]

Jako, że przedstawiony kod to sam header, nic na jego podstawie nie wywnioskuje.

Natomiast patrząc na obrazki mogę powiedzieć iż FF (z jakiegoś) powodu "nie widzi" plików css ani grafiki (nic poza plikiem Start!.html). Jesteś pewien, że przeglądarka jest odpowiednio skonfigurowana - na pierwszy rzut: Ustawienia - Opcje - Treść? Wgrywałeś ten materiał na serwer WWW? Tak samo jest?

[EndlessRain]

Jeśli jest taka możliwość, wysłałbym Ci na maila całą zawartość. Kącik był sprawdzany na kilku komputerach, tylko Firefox nie chciał prawidłowo odczytać kodu, inne przeglądarki odczytywały doskonale.

[barmazu]

Możesz wysłać (email na PW). Właśnie znalazłem ten template i na pewno działa pod FF...

http://www.openwebdesign.org/design/2763/CityOfAngels/

[EndlessRain]

Wysłałem zawartość kącika. Nie wiem czemu ten template działa, a kącik nie.

[barmazu]

Na szybko problem można obejść w ten sposób: w pliku Strat!.html wstaw definicję styli w sposób podany poniżej (kod)

Ale jeszcze pomyślę jak to zrobić linkiem do pliku css

UPDATE:

*** Pomyślałem. Ściąg sobie kolego Notepad++ i otwórz nim pilk stylin.css. Następnie z menu wybierz Format > Koduj UTF-8. Zapisz. Odśwież stronęw FF... Voila! Rzecz jasna w pliku Start!.html nic nie musisz ruszać, może zostać link. Proponowałbym jednak poprawić meta tagi (description, keywords, etc)***

W domyślnym kodowaniu (ANSI) FF czytal ten plik tak: ????????????????????????? ....

<style type="text/css">


body {

background:#000 url('bg.jpg') no-repeat 50% 50px;

margin:0;

padding:0;

text-align:center;

}


#container {

background:#000;

width:760px;

margin:0 auto;

text-align:left;

}


#header {

background:url('header.jpg') no-repeat center top;

width:760px;

height:234px;

position:relative;

margin:0;

}


#menu {

width:210px;

float:left;

margin:50px 0 0 0;

}


.leftbox {

width:185px;

background:#000;

border-width:7px 1px 7px 7px;

border-color:#555 #555 #555 #000;

border-style:solid;

margin:60px 0 0 0;

padding:10px 10px 10px 0;

text-align:justify;

font:14px verdana,arial,sans-serif;

color:#fff;

}


.leftbox ul {

list-style-type:none;

margin:10px 0 10px 0;

padding:0;

}


.leftbox li, .leftbox a {

font-weight:bold;

color:#99cc33;

letter-spacing:1px;

text-align:left;

text-decoration:none;

}


.leftbox a:hover {color:#ccff66}


h4 {

font:bold 15px verdana,arial,sans-serif;

color:#fff;

display:block;

margin:0 0 15px 0;

letter-spacing:1px;

text-align:center;

}


a.item {

background:url('menu.jpg') no-repeat;

max-width:210px;

height:34px;

display:block;

padding:0 0 0 10px;

font:bold 15px verdana,arial,sans-serif;

color:#fff;

text-decoration:none;

line-height:30px;

}



a.item:hover {

background-position:10px -34px;

padding:0 0 0 20px;

}


#main {

background:#000;

min-height:400px;

margin:0 0 0 220px;

font:15px verdana,arial,sans-serif;

color:#fff;

text-align:left;

}


#footer {

clear:both;

height:40px;

background:#000;

margin:50px 0 0 0;

text-align:center;

padding:20px 0 10px 0;

}


#footer a {

font:bold 15px verdana,arial,sans-serif;

color:#ccc;

text-decoration:none;

letter-spacing:1px;

margin-left:20px;

}


#footer a:hover {color:#ccff66}


.bottomRight {background:url('bottomRight.jpg') no-repeat right bottom}


.content {

min-height:190px;

background:url('topleft.jpg') no-repeat left top;

padding:30px 40px;

margin:20px 0 30px 0;

text-align:justify;

}


h1 {

position:absolute;

left:20px;

bottom:20px;

margin:0;

display:inline;

font:60px georgia,times,serif;

color:#fff;

letter-spacing:5px;

font-variant:small-caps;

}


h2 {

font:bold italic 25px georgia,times,serif;

color:#fff;

display:block;

margin:15px 0 0 0;

}


h3 {

font:bold italic 25px georgia,times,serif;

color:#99cc33;

display:block;

margin:15px 0 0 0;

}


.content a {

text-decoration:none;

color:#99cc33;

font-weight:bold;

}


.content a:hover {color:#ccff66}


.content ul {list-style-type:circle}

.content li {font:bold 16px verdana,arial,sans-serif;}


p {margin-top:20px}



#footer p , #footer p a {

text-align:right;

font:11px verdana,arial;

color:#999;

margin:0;

}

</style>

[EndlessRain]

Wstawione

[barmazu]

Zobacz na update mojego poprzedniego postu (z kodem)...

:mage:

[EndlessRain]

Dziękuję, to pomogło! Jestem bardzo wdzięczny za pomoc.

Temat do zamknięcia, problem rozwiązany.