Ako ste se bar malo bavili HTML i CSS kodiranjem sigurno ste nailazili na razne. nekada i žustre polemike oko poštovanja standarda i rešavanju problema što veb čitači standarde ne poštuju u potpunosti a nekada ih i različito tumače.
Davno sam prestao da se time zamaram. Ne upinjem se preterano da prilikom izrade sajta ostvarim poptunu istovetnost prikaza u svim čitačima. Zadovoljan sam ako je izgled dovoljno sličan, a već sam navikao šta treba da izbegavam kako bih umanjio ovu vrstu problema.
Pokazaću jedan jednostavan primer koji ilustruje koliko su veb čitači mušičavi i da im se svima ne može ugoditi.
Evo primera HTML koda:
<div id="okvir"> <div id="polje"> <div id="sadrzaj"> </div> </div> </div>
A na njega ćemo primeniti sledeće stilove:
#okvir { border: 1px solid #000000; background-color: #333333; } #polje { border: 1px solid #ff0000; background-color: #666666; width: 250px; height: 25px; margin: 5px; padding: 5px; } #sadrzaj { border: 1px solid #000000; background-color: #eeeeee; width: 100%; height: 100%; }
Ukratko, objekat okvir služi samo tome da u njega smestimo objekat polje kako bismo mogli da vidimo položaj objekta polje na osnovu podešenih spoljnih rastojanja (margin), a objekat sadržaj služi samo da pokaže unutrašnje rastojanje (padding) u okviru objekta polje.
Dakle, sva podešavanja su u stvari na objektu polje, a ona su jednostavna: objekat je širok 250 a visok 25 tačaka, spoljno rastojanje od drugih objekata je 5 tačaka a i rastojanje unutrašnjih objekata od ivice objekta polje je 5 tačaka. Prosto da ne može biti prostije. Boje okvira i polja su tu da se lako razazna šta je šta.
Evo kako se ovo prikazuje u fajerfoksu 3 i eksploreru 6:
Fajerfoks je očigledno veličinu unutrašnjeg odstojanja objekta polje dodao na zadatu širinu objekta i tako dobio konačnu širinu objekta 260 tačaka, što naravno nije ono što je bio cilj, a uz to očigledno i unutrašnje rastojanje nije ispoštovao do kraja – vidi se da je desno rastojanje manje nego što treba da bude. Visina objekta je takođe uvećana za 10 tačaka. Spoljno rastojanje je ispoštovano kao što je i zadato.
Internet eksplorer se ponaša drugačije. On je, naime, ispoštovao zadatu širinu i visinu objekta polje, a unutrašnje rastojanje je obezbedio nauštrb unutrašnjeg prostora, što je upravo i očekivano ponašanje. Međutim, zato je spoljnje rastojanje ispoštovano samo sa leve i desne strane, dok ga sa gornje i donje strane objekta nema.
Šta na osnovu ovoga zaključiti?
Širina i visina objekta, i spoljna i unutrašnja rastojanja su osnovni elementi, koji su verovatno najviše korišćeni u određivanju izgleda objekata u HTML dokumentima uopšte. Ako veb čitači ovo ne mogu da ispoštuju, šta tek očekivati u komplikovanijim prohtevima?
IE 8.0 i FF 19.0 daju potpuno isti prikaz:
http://imageshack.us/photo/my-images/545/fftest.jpg/
http://imageshack.us/photo/my-images/703/ietest.jpg/
Članak je napisan davno, test je rađen dok je još biko aktuelan vindouz eksplorer 6. Od tada se mnogo toga promenilo.
Ipak, primeti se da i u tvom primeru, prikaz nije tačan, odnosn ne ogovara CSS podešavanjima.
Ima malo odstupanja, ali je znatno prihvatljivije nego pre. Valjda jednom taj CSS postane podržan i poštovan po browser-ima.
P.S. Valjalo bi da postovi imaju datum. Ovako, teško je odrediti kada su nastali.
Na dnu svakog članka stoji datum.