problem z ulozeniem strony w firefoxie, a w ie wszystko jest ok Opcje

[biehu]

Witam !

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

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

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

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)

Ten post edytował popo 20.08.2005, 09:25:00

[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

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

<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

Ten post edytował popo 21.08.2005, 20:32:09

[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

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

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

Ten post edytował biehu 22.08.2005, 07:00:37

[revyag]

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

[biehu]

1. zmiany wprowadzone, dzieki temu znacznie zmniejszylem rozmiar arkusza

2. to sie nazywa optymalizacja wielkości strony


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

[biehu]

Po wielkich bojach strona zakonczona i uruchomiona pod http://www.bieszk.com

Chetnie poznam wszelkie komentarze odnosnie kodu.


Dzieki za cala pomoc

[revyag]

Bardziej to podchodzi pod forum oceny. Wstaw tam swoją stronę