Hajoan.
Määritellään tyyli.css esim. näin:
.kökkö {
width: 100px;
margin-right: 15px red;
padding-left: 5px;
}
Nyt Opera ja IE näyttävät elementin siten, että sen leveys on 100 pikseliä, ja sen sisällöllä (esim. tekstillä) on sivusuunnassa tilaa 100-15-5 = 80 pikseliä.
Mutta Mozillapa (ainakin tulikettu) onkin semmonen veijari, että se antaa elementin sisällölle tilaa 100 pikseliä, ja tämän päälle leventää elementtiä 15 5 pikseliä, jolloin sen kokonaisleveydeksi saadaan 120 pikseliä.
Nii, kiva juttu joo. Suunnittele siinä nyt sitte webbisivuja.
Määritellään tyyli.css esim. näin:
.kökkö {
width: 100px;
margin-right: 15px red;
padding-left: 5px;
}
Nyt Opera ja IE näyttävät elementin siten, että sen leveys on 100 pikseliä, ja sen sisällöllä (esim. tekstillä) on sivusuunnassa tilaa 100-15-5 = 80 pikseliä.
Mutta Mozillapa (ainakin tulikettu) onkin semmonen veijari, että se antaa elementin sisällölle tilaa 100 pikseliä, ja tämän päälle leventää elementtiä 15 5 pikseliä, jolloin sen kokonaisleveydeksi saadaan 120 pikseliä.
Nii, kiva juttu joo. Suunnittele siinä nyt sitte webbisivuja.
Vastaukset 8
Vanhimmat
Firefox on tuossa tapauksessa ainoa joka näyttää oikein :)
Älä kuitenkaan hajoa, on tuohonkin ratkaisut.. pikainen googletus..
Ilmeisesti operakin näyttää "quirks" -modella noi väärin, mutta ehkä "standards" -modella oikein. Kannattaa ainakin kokeilla.
Tuon mukaan standards modelle saa kun asettaa doctypen oikein:
http://www.opera.com/docs/specs/doctype/
Sama homma ilmeisesti IE:n kanssa jotta se emuloi quirks modella jotain vanhemman ie:n bugia.
http://accessat.c-net.us/articles/hide-css_p3.html
Ei ollut ehkä parhaiten jäsennelty mutta jospa tuosta olisi apua.
Kiitos, tämä doctype ratkaisi ongelmani.
Olin määritellin doctypen HTML 4.0 Transitionaliksi, mutta nyt muutin sen 4.0 Strictiksi, minkä jälkeen Opera ja IE osasivat tulkita sen oikein.
Kyllä kyllä, IE ja Opera tosiaan tekee tuon asian väärin. Jos vaan jaksat, niin hae jostain palautteen antosivu ja kerro että olisi oikein hyvä jos selain noudattaisi W3C:n CSS standardia.
Nyt, jos mieleesi tulee että esimerkiksi IE:n tapa käsitellä marginaaleja ja paddingejä on parempi, niin sanon sinulle heti, että näin ei ole. Kyllä W3C:n kaverit on homman miettineet tarkkaan.
Jos halutaan et se on kaikilla sama, niin sen vois tehdä näin?
.kökkö {
width: 100px;
}
.kökkö p {
padding-right: 15px;
padding-left: 5px;
}
Css:ssä on muutenkin niin paljon erilaisia virityksiä ja näkemyseroja, ettei ikinä tule olemaan sellaista aikaa jolloin kaikki selaimet näyttäisi samoin, vaikka W3C standardia tulisikin kaikkien noudattaa, silti se on vain suositus miten joku tulisi selaimessa näyttää!
Kaikista näistä erilaisista css:n ongelmista johtuen layouttien teko täysin css:än pohjautuen on erittäin vaikeaa toteuttaa, kuvat ja tekstit hyppii div:n yli ja mikään ei näytä samalta eri selaimissa, mutta kun ottaa vanhan kunnon taulukkolayoutin käyttöön niin pääsee paljon helpommalla ja sivut näkyy oikein kaikilla selaimilla!
Kannattaa vissiin ensin tutkia ja sitten vasta hutkia:
http://www.mezzoblue.com/css/cribsheet/#boxmodel
http://www.hicksdesign.co.uk/journal/483/3d_css_box_modelindex.php
http://css-discuss.incutio.com/?page=BoxModelHack
» Suunnittele siinä nyt sitte webbisivuja.»
Suunnittele vaan, mutta opettele nyt ensin jooko.
Laitoin diville täsmälleen kertomasi määritykset plus taustavärin. Tei sit kuvakaappauksen ja tarkastin fotarissa minkä kokoiset värilliset alueet tuo koodi tuotti. Arvaas mitä:
Opera7.54u2: leveys 105px
IE6.0: leveys 105px
Firefox1.0: leveys 105px
DTD oli xhtml1.0 Strict
P.S. Kertoisitko mitä ihmettä tarkoittaa määritys
margin-right: 15px red;
..saman ilman dtd:tä
Opera7.54u2: leveys 100px
IE6.0: leveys 100px
Firefox1.0: leveys 105px
Älä syytä selaimia siitä mitä ne näyttävät ELLET ITSE OSAA KERTOA MILLÄ SÄÄMMÖILLÄ pitäisi näyttää.
Selaimet eivät sentään ole ajatustenlukijoita jotka automaattisesti äkkäisivät mitä sivuntekijän mielessä milloinkin sattuu liikkumaan. Niille pitää kertoa TARKASTI mitä haluat ennenkuin voit odottaa saavasi pyytämäsi.
Pahoittelen, mutta viestissäni oli virhe. Sen piti olla näin:
kökkö {
width: 100px;
border-right: 15px red;
padding-left: 5px;
}
Eli 'margin' korvattu sanalla 'border'.