Ако сте се бар мало бавили HTML i CSS кодирањем сигурно сте наилазили на разне. некада и жустре полемике око поштовања стандарда и решавању проблема што веб читачи стандарде не поштују у потпуности а некада их и различито тумаче.
Давно сам престао да се тиме замарам. Не упињем се претерано да приликом израде сајта остварим поптуну истоветност приказа у свим читачима. Задовољан сам ако је изглед довољно сличан, а већ сам навикао шта треба да избегавам како бих умањио ову врсту проблема.
Показаћу један једноставан пример који илуструје колико су веб читачи мушичави и да им се свима не може угодити.
Ево примера HTML кода:
<div id="okvir"> <div id="polje"> <div id="sadrzaj"> </div> </div> </div>
А на њега ћемо применити следеће стилове:
#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%; }
Укратко, објекат okvir служи само томе да у њега сместимо објекат polje како бисмо могли да видимо положај објекта polje на основу подешених спољних растојања (margin), а објекат sadržaj служи само да покаже унутрашње растојање (padding) у оквиру објекта poljе.
Дакле, сва подешавања су у ствари на објекту poljе, а она су једноставна: објекат је широк 250 а висок 25 тачака, спољно растојање од других објеката је 5 тачака а и растојање унутрашњих објеката од ивице објекта poljе је 5 тачака. Просто да не може бити простије. Боје оквира и поља су ту да се лако разазна шта је шта.
Ево како се ово приказује у фајерфоксу 3 и експлореру 6:
Фајерфокс је очигледно величину унутрашњег одстојања објекта poljе додао на задату ширину објекта и тако добио коначну ширину објекта 260 тачака, што наравно није оно што је био циљ, а уз то очигледно и унутрашње растојање није испоштовао до краја – види се да је десно растојање мање него што треба да буде. Висина објекта је такође увећана за 10 тачака. Спољно растојање је испоштовано као што је и задато.
Интернет експлорер се понаша другачије. Он је, наиме, испоштовао задату ширину и висину објекта poljе, а унутрашње растојање је обезбедио науштрб унутрашњег простора, што је управо и очекивано понашање. Међутим, зато је спољње растојање испоштовано само са леве и десне стране, док га са горње и доње стране објекта нема.
Шта на основу овога закључити?
Ширина и висина објекта, и спољна и унутрашња растојања су основни елементи, који су вероватно највише коришћени у одређивању изгледа објеката у ХТМЛ документима уопште. Ако веб читачи ово не могу да испоштују, шта тек очекивати у компликованијим прохтевима?
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/
Чланак је написан давно, тест је рађен док је још бико актуелан виндоуз експлорер 6. Од тада се много тога променило.
Ипак, примети се да и у твом примеру, приказ није тачан, односн не оговара ЦСС подешавањима.
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.
На дну сваког чланка стоји датум.