Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: problem z ulozeniem strony w firefoxie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
biehu
Witam exclamation.gif!

Zabralem sie za stworzenie, mojej pierwszej, stronki opartej w 100% na css i xhtml. Siedze juz nad tym kilka dni i nie moge rozwiazac jednego problemu sad.gif

Adres to: http://bieszk.com/test

Po IE 6.0 wszystko wyglada ok, ale pod FireFoxem sie rozjezdza sad.gif

Bylbym wdzieczny za wszelkie uwagi co jest tego przyczyna.


Z gory dzieki za pomoc
Biehu
gu35t
co sie rozjezdza bo u mnie na FF wszystko wyglada OK ?
marast78
Przede wszystkim musisz wiedzieć, że IE nie przestrzega zgodności z w3c, NAJLEPIEJ BYŚ umieścił tu kod css to by można było zobaczyć więcej, a poza tym ja tworząc kod dla IE piszę css pod ta przeglądarke, a inny css pod FF,Opere i Mozillę, nie ma innego wyjścia gdyż IE jest paskudna
przy użyciu position jeszcze wszystko gra ale podejrzewam, że używasz float a IE ma problem z tym, może spróbuj dodać display:inherit do bloków w których użyłeś
float
popo
aaa juz widze problem z box model (to IE zle to interpretuje - niezgodnie ze standartem w3c) proponuje uzyc jednego z dobrze znanych hack'ow np:

Kod
width:227px;              
voice-family: "\"}\"";
voice-family: inherit;
width: 225px;
}
html>body #navbar {
width:225px;
}


pierwszy width jest dla ie i = wielkosc boxa + ramka + padding

2 i 3 jest dla opery mozilli i calej reszty i jest rozmiarem samego boxa

btw radze zapoznac sie z specyfikacja poniewaz obecnie chyba wszystko procz IE sie jej trzyma (padding, i ramki dodaja sie do rozmiaru boxa)
biehu
dzieki za porade, bo to rzeczywiscie cenna sprawa, ale to nie rozwiązuje mojego problemu

rozpoczalem stronke od poczatku i problem polega na czyms takim, ze definiuje div calego kontenera + dwa div'y head-left i head-right

Cytat
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #7b7b7b;
}

div#container {
position: relative;
background: #ffffff;
width: 752px;
border-bottom: 1px solid #636363;
border-right: 1px solid #636363;
margin: 0px auto 0px auto;
padding: 5px;
voice-family: "\"}\"";
voice-family: inherit;
width: 742px;
}

div#head-left {
float: left;
width: 250px;
height: 38px;
border-bottom: 3px solid #eaeaea;
margin: 0px;
padding: 0px;
}

div#head-right {
float: left;
width: 492px;
height: 30px;
border-bottom: 11px solid #eaeaea;
margin: 0px;
padding: 0px;
}


daje do tego taki prosty kodzik

Cytat
<div id="container">

<div id="head-left"><img src="img/_.gif" border="0" alt="" width="1" height="1" /></div>

<div id="head-right"><img src="img/_.gif" border="0" alt="" width="1" height="1" /></div>

</div>


wyglada to tak http://bieszk.com/test/

i to juz mi sie rozjezdza pod FireFox'em (pod IE jest ok), dokladniej dwa wewnetrzne div'y nie dostaja tla kontenera :-(

znacie na to jakies rozwiazanie
popo
zastosuj ten sam manewr co przy width (ta sama zasada)
css powinien wygladac chyba tak
Kod
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #7b7b7b;
}

div#container {
position: relative;
background: #ffffff;
width: 752px;
border-bottom: 1px solid #636363;
border-right: 1px solid #636363;
margin: 0px auto 0px auto;
padding: 5px;
voice-family: "\"}\"";
voice-family: inherit;
width: 741px;
}
html>div#container {
width:741px;
}

div#head-left {
float: left;
width: 250px;
border-bottom: 3px solid #eaeaea;
margin: 0px;
padding: 0px;
height: 38px;
voice-family: "\"}\"";
voice-family: inherit;
height: 35px;
}
html>div#head-left {
height:35px;
}


div#head-right {
float: left;
width: 492px;
border-bottom: 11px solid #eaeaea;
margin: 0px;
padding: 0px;
height: 30px;
voice-family: "\"}\"";
voice-family: inherit;
height: 19px;
}
html>div#head-right {
height:19px;
}


bordery tez powiekszaja wedlug specyfikacji rozmiar boxa a ta czesc z html>...
jest przeznaczona dla przegladarek wspierajacych css2.0 (pozwala obejsc jakis bug w operze 7 czy 8 o ile dobrze pamietam)

pisalem na szybko nie testujac ale powinno byc ok
biehu
:-( niestety, ale dalej nie pomaga

wkleilem dokladnie Twoj kod i efekt ten sam

oprocz tego, ze teraz sie rozjechaly te kreski, ale to nie istotne, bo trzebaby tylko pozmieniac wysokosci, to efekt jest wciaz ten sam tzn. pod FireFox'em wewnetrze div'y nie dostaja tla kontenera

przy testach wyszlo mi, ze powoduje to zastosowanie float: left, bo bez tego choc wewnetrzene div'y sa jeden pod drugim, zamiast obok siebie, to dostaja tlo


------------------------------------------------
po kilku ladnych godzinach
------------------------------------------------


wspomagany generatorem layout'ow oraz sztuka dedukcji :-) doszedlem do nastepujacego wniosku

aby wewnetrzne div'y, ktore sa ustawiane obok siebie dzieki float: left, dostaly tlo kontenera musi byc pod nimi umieszczony kolejny div o pelnej szerokosci z parametrem clear: both

dla przykladu umieszczam poprawny kod

css
Cytat
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #7b7b7b;
}


div#container {
background: #ffffff;
width: 753px;
border-bottom: 1px solid #636363;
border-right: 1px solid #636363;
margin: 0px auto 0px auto;
padding: 5px;
voice-family: "\"}\"";
voice-family: inherit;
width: 742px;
}
html>div#container {
width: 742px;
}

div#head-left {
float: left;
width: 250px;
height: 41px;
border-bottom: 3px solid #eaeaea;
margin: 0px;
padding: 0px;
voice-family: "\"}\"";
voice-family: inherit;
height: 38px;
}
html>div#head-left {
height: 38px;
}

div#head-right {
float: left;
width: 492px;
height: 41px;
border-bottom: 11px solid #eaeaea;
margin: 0px;
padding: 0px;
voice-family: "\"}\"";
voice-family: inherit;
height: 30px;
}
html>div#head-right {
height: 30px;
}

div#head-bottom {
clear: both;
width: 742px;
margin: 0px;
padding: 0px;
}


xhtml
Cytat
<div id="container">

   <div id="head-left"><img src="img/_.gif" border="0" alt="" width="250" height="1" /></div>

   <div id="head-right"><img src="img/_.gif" border="0" alt="" width="492" height="1" /></div>

   <div id="head-bottom"><img src="img/_.gif" border="0" alt="" width="742" height="1" /></div>

</div>


chyba, ze ktos zna jakies lepsze rozwiazanie ?
revyag
1. Kosmetyka smile.gif
- nie pisz: margin: 0px 0px 0px 0px, wystarczy margin:0, to samo dotyczy padding
- jak podajesz wartość jednostki równą zero to nie trzeba podawać pikseli smile.gif
- margin: 0px auto 0px auto -> margin:0 auto;
- w każdym elemencie div dajesz margin:0 i padding:0, nie musisz, domyślnie te wartości wynoszą 0, ale jeśli chcesz to możesz skorzystać z selektora uniwersalnego:
Kod
* {
    margin:0;
    padding:0;
}

dla wszystkich elementów wartości margin i paddin będą wynosić 0

2.
Po co kombinować tyle z borderami ? Nie lepiej zrobić sobie taki obrazek ? Na pewno mniej kłopotów by było snitch.gif
biehu
1. zmiany wprowadzone, dzieki temu znacznie zmniejszylem rozmiar arkusza biggrin.gif

2. to sie nazywa optymalizacja wielkości strony winksmiley.jpg


dzieki za uwagi
popo
przy stalych szerokosciach divow obrazek wydaje sie rozsadnym wyjsciem
biehu
dlaczego ?

dzieki takim trick'om na calej stronie zaoszczedzam kilka cennych kB

ja mam zwyczaj, ze gdzie sie tylko da to uzywam border'ow lub ewentualnie robie obrazek o szerokosci 1px i ustawiam go jako powtarzajace tlo
revyag
Jeśli miałbyś sporo takich obrazków na stronie to powiedzmy że ma to jakieś uzasadnienie, ale zauważyłem tylko jeden taki element, który wymaga dosyć złożonego kodu css.
Poza tym mały test snitch.gif
Zrobiłem sobie takie obrazek w Gimpie, zapisałem jako gifa. Jego wielkość to 216 bajtów. Rozumiem że optymalizacja uber alles, no ale bez przesady snitch.gif
biehu
Po wielkich bojach strona zakonczona i uruchomiona pod http://www.bieszk.com

Chetnie poznam wszelkie komentarze odnosnie kodu.


Dzieki za cala pomoc exclamation.gif
revyag
Bardziej to podchodzi pod forum oceny. Wstaw tam swoją stronę smile.gif
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.