Kirottu DIV

Ei antanut luonto periksi ja jättää sitä DIV ongelmaa, mistä eilen kerroin, paikoilleen. Niinpä mietin miten homman voisi helposti ratkaista. Selailin webiäkin, mutta ihan heti ei silmään sattunut suoraa ratkaisua ongelmaan. Siispä siitä tuskin on haittaa jos kerron miten ongelman ratkaisin...

Ongelma oli siis se, että kun määrittelet DIV elementille leveyden ja sen lisäksi vaikka padding, margin tai border -ominaisuuden, niin Firefox lisää nuo ominaisuuksien leveydet DIV elementin "ulkopuolelle" ja Internet Explorer laskee ne DIV elementiin sisään. Esimerkkinä siis: jos määrittelet DIV elementin jonka leveys on 200 pikseliä ja haluat, että elementin sisällä oleva teksti on 5 pikselin päässä elementin reunasta (padding 5 pikseliä) niin Firefoxilla tuon alkuperäisen DIV elementin todellinen leveys on 200 + 5 + 5 pikseliä, mutta Internet explorer pitää DIV elementin leveyden 200 pikselissä. Olen yhä sitä mieltä, että IE:n tapa käsitellä leveyttä on järkevämpi.

Minullapa oli siis DIV elementti joka oli määritelty näin (tyyli tietenkin CSS filessä, mutta esimerkissä html:n seassa).

<DIV STYLE='width:200px;padding:5px;'>tässä sitten varsinainen sisältö</DIV>

Muuten tuo oli hyvä, mutta itse elementin leveys oli itseasiassa 210 pikseliä firefoxissa. Niinpä tuon sai korjattua helposti pienellä nesting-järjestelyllä.

<DIV STYLE='width:200px;padding:none;border:none;margin:none;'>
<DIV STYLE='padding:5px;'>tässä sitten varsinainen sisältö</DIV>
</DIV>

Ja lopputuloksena tulee 200 pikseliä leveä DIV molemmilla selaimilla, sekä 5 pikselin rako tekstin ja DIV -elementin reunan välillä.

Helppoa, mutta turhaa ja turhauttavaa.

DIV elementit, firefox ja internet explorer

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.

Ulkoasun päivitys vuoteen 2007

Hyvin suunnitellun järjestelmän ulkoasua ei pitäisi tarvita muuttaa kovin usein. Itse arvioisin, että noin kerran vuodessa tai kahdessa pitäisi riittää. Monet suositut palvelut ovat pitäneet ulkoasunsa ja toiminnallisuutensa ennellaan koko elinkaarensa ajan. Mielestäni totaalinen kehityksen pysäyttäminen on huono ratkaisu sekin. Vaikka perusteknologia (html, css, javascript, etc) pysyisikin ennallaan, puhaltaa saittien ulkoasun suunnittelussa jatkuvasti uudet tuulet. Vuosituhannen alussa suunnitellut palvelut ovat auttamattomasti vanhan näköisiä.

Minä olen puolestani uusinut Mutteri.com:in ulkoasia säännöllisesti. Nyt taitaa olla jo layout versio kolme tai neljä menossa. Jokainen päivitys on aina tuntunut merkittävältä parannukselta edelliseen. Niin tietenkin tälläkin kertaa. Pyrin uuden ulkoasun myöt selkiyttämään palvelua ja yksinkertaistamaan. Samalla pyrin ottamaan tämän hetken tyylisuunnat huomioon kuten keskitetty kiinteän levyinen sisältöosa, selvästi kolmeen tai neljään osaan jaettu sivu vaakatasoisillä taustaväreillä, taulukoinnin sijaan pyrin käyttämään enemmän DIV elementtejä. Sanokaa mitä sanotte (ja sanoa tietenkin saa) mutta nyt näyttää järjestelmä taas paljon paremmalta ja modernimmalta.

Suurimmat huolet tällä hetkellä liittyvät tuoteryhmien löytämiseen. Edellisessä versiossa tuoteryhmät olivat jatkuvasti oikeassa reunassa. Nyt ryhmät on siirretty itse sisältöosaan ja useimmiten sivun alalaitaan. On myönnettävä myös, että uusi tuoteryhmä luettelo toimii hieman huonommin. Siinä on selvästi vielä parannettavaa. Toinen merkittävä muutos oli siirtää sisäänkirjautuminen omalle sivulleen. Aikaisemmine sisäänkirjautumislomake oli myös aina näkyvillä sivun oikeassa reunassa. Nyt sisään pitää kirjautua erilliseltä sivulta. Tuolle sisäänkirjautumissivulle on luonnollisesti linkkejä muutamassakin paikassa sivulla, mutta on mielenkiintoista nähdä miten muutos tulee vaikuttamaan esimerkiksi rekisteröitymisiin tai sisäänkirjautuneena jätettyihin ilmoituksiin. Ja viimeinen huoli on tietenkin vanha kunnon Internet Explorer. Tuo puolen maailman käyttämä selain, joka ei ymmärrä standardeista tuon taivaallista, vaan taittaa sivut päin hel***tiä. Sitä voi tietenkin yrittää lohduttautua sillä, että sivut ovat läpäisseet W3C:n html ja css validaattorit, mutta se ei auta, sillä IE ei silti taita sivuja oikein. Kun katson mutteri.com:in käyttötilastoja, noin 55% käyttäjistä käyttää IE selainta. Noista 55% onneksi yli puolet käyttää jo IE 7 versiota, joka taittaa sivun vähän paremmin - joskaan ei silti oikein. Tässä sitä taas ollaan:

This site has been optimized for FireFox.

Niinpä sivusto toimii IE:llä, mutta ulkoasu ei ole ihan sellainen kuin sen pitäisi olla. Aina voi suositella FireFox selainta, mutta kukapa sitä suosikkiselaintaan vaihtaisi jonkin sivuston takia...? En minä ainakaan. Vaikka Microsoft aikanaan luultavasti edesauttoi internetin leviäimistä, kehitystä ja yleistymistä upottamalla IE:n osaksi käyttöjärjestelmää, teki se myös karhunpalveluksen koko internet -yhteisölle toteuttamalla selaimensa huonosti, standardeja karttaen ja kiertäen, sekä omia laajennoksia luoden.