Olen tunnetusti huono ihminen mitä tulee sivujen suunnitteluun. Teen koodin puhtaasti linux ympäristössä, ja koska minulla on Windows käytössä vain töissä, jää IE:llä testaaminen usein retuperälleen. Niinpä tälläkin kertaa.
Olen viimeaikoinen hieronut tuota palkkatieto.net palvelua uuteen kuosiin. Sivuille on lisätty uusia toiminnallisuuksia ja, kuten arvata saattaa, on ulkoasu taas kerran muutettu. Taas voi vain sanoa, että uusi on varmaan paras ikinä. Syyllistyin taas perisyntiini, ja suunnittelin sivuista pääosin mustan-harmaan-valkoiset. Se on minulle tuttua ja turvallista - värisokea kun olen.
Sitten itse ongelmaan, jäin tänään kotiin tekemään töitä. Siitä johtuen oli hieman enemmän aikaa, joten ehdin katsomaan miltä tuo palkkatieto näyttää IE:llä katsottuna... Ja huonoltahan se näytti. Navigaatio oli ihan kuralla ja sivuelementit hyppivät vähän minne sattuu. Mistä näin, aloin miettimään? Ongelmahan oli tietenkin se, että olin nykytyyliin tehnyt sivujen asettelut DIV -elementtiä käyttäen. (Taisin aiheesta jossain välissä jo muutaman sanan kirjoittaa). DIV -elementti on ihan mukava ja kätevä. Kun hommasta pääsee liikkeelle, voi sillä korvata taulukot aika pienellä vaivalla. Ja etuna pitäisi olla nopeampi renderöinti selaimissa. Tiedä siitä sitten, mutta näin olen nyt jokatapauksessa tehnyt.
Ongelmaksi syntyikin se, miten eri selaimet käsittelevät DIV elementtiä ja siihen liitettyjä padding, margin ja border -ominaisuuksia. Siinä missä FireFox on sitä mieltä, että DIV elementin koon lisäksi määritellyt padding, margin ja border -ominaisuudet lisätään elementin kokoon, käsittelee Internet explorer elementin niin, että kyseiset arvot lasketaan DIV -objektin sisään.
Eli, jos määrittelet DIV elementille leveyden 200 pikseliä ja lisäksi padding -arvoksi 10 pikseliä, näyttää Firefox kyseisen DIV elementin 220 pikseliä leveänä, mutta Internet Explorer näyttää sen 200 pikseliä leveänä. Enpä tiedä kumpi on oikeassa standardin mukaan (jos standardi ottaa tähän mitään kantaa), mutta IE:n tapa käsitellä tuntuu johdonmukaisemmalta ja helpommalta hallita.
Oli totuus mikä oli, niin koodaajan pitää siis huomioida miten eri selaimet soveltavat padding, margin ja border -ominaisuudet eri objekteihin. Tämän voi kiertää aika helposti HTML+CSS tempuilla, mutta minä en tässä vaiheessa ole viitsinyt siihen hommaan ruveta. Niinpä sivustoni näyttää nyt IE:llä rumemmalta kuin Firefoxilla. Pienten korjailujen jälkeen sain sen kuitenkin taas käytettävään kuntoon myös IE:llä.
Loppukaneetiksi mainitaan vielä se, että firefox hyväksyy CSS:ssä määritetyn border-bottom:1px; mutta IE vaatii, että tuo määritetään border-bottom-width:1px; Onneksi jälkimmäinen toimii myös Firefoxilla.
Olen viimeaikoinen hieronut tuota palkkatieto.net palvelua uuteen kuosiin. Sivuille on lisätty uusia toiminnallisuuksia ja, kuten arvata saattaa, on ulkoasu taas kerran muutettu. Taas voi vain sanoa, että uusi on varmaan paras ikinä. Syyllistyin taas perisyntiini, ja suunnittelin sivuista pääosin mustan-harmaan-valkoiset. Se on minulle tuttua ja turvallista - värisokea kun olen.
Sitten itse ongelmaan, jäin tänään kotiin tekemään töitä. Siitä johtuen oli hieman enemmän aikaa, joten ehdin katsomaan miltä tuo palkkatieto näyttää IE:llä katsottuna... Ja huonoltahan se näytti. Navigaatio oli ihan kuralla ja sivuelementit hyppivät vähän minne sattuu. Mistä näin, aloin miettimään? Ongelmahan oli tietenkin se, että olin nykytyyliin tehnyt sivujen asettelut DIV -elementtiä käyttäen. (Taisin aiheesta jossain välissä jo muutaman sanan kirjoittaa). DIV -elementti on ihan mukava ja kätevä. Kun hommasta pääsee liikkeelle, voi sillä korvata taulukot aika pienellä vaivalla. Ja etuna pitäisi olla nopeampi renderöinti selaimissa. Tiedä siitä sitten, mutta näin olen nyt jokatapauksessa tehnyt.
Ongelmaksi syntyikin se, miten eri selaimet käsittelevät DIV elementtiä ja siihen liitettyjä padding, margin ja border -ominaisuuksia. Siinä missä FireFox on sitä mieltä, että DIV elementin koon lisäksi määritellyt padding, margin ja border -ominaisuudet lisätään elementin kokoon, käsittelee Internet explorer elementin niin, että kyseiset arvot lasketaan DIV -objektin sisään.
Eli, jos määrittelet DIV elementille leveyden 200 pikseliä ja lisäksi padding -arvoksi 10 pikseliä, näyttää Firefox kyseisen DIV elementin 220 pikseliä leveänä, mutta Internet Explorer näyttää sen 200 pikseliä leveänä. Enpä tiedä kumpi on oikeassa standardin mukaan (jos standardi ottaa tähän mitään kantaa), mutta IE:n tapa käsitellä tuntuu johdonmukaisemmalta ja helpommalta hallita.
Oli totuus mikä oli, niin koodaajan pitää siis huomioida miten eri selaimet soveltavat padding, margin ja border -ominaisuudet eri objekteihin. Tämän voi kiertää aika helposti HTML+CSS tempuilla, mutta minä en tässä vaiheessa ole viitsinyt siihen hommaan ruveta. Niinpä sivustoni näyttää nyt IE:llä rumemmalta kuin Firefoxilla. Pienten korjailujen jälkeen sain sen kuitenkin taas käytettävään kuntoon myös IE:llä.
Loppukaneetiksi mainitaan vielä se, että firefox hyväksyy CSS:ssä määritetyn border-bottom:1px; mutta IE vaatii, että tuo määritetään border-bottom-width:1px; Onneksi jälkimmäinen toimii myös Firefoxilla.
Ei kommentteja:
Lähetä kommentti