Huomasin juuri, että blogini rakenne heittää häränpyllyä, jos käytössä jolla kulla onnettomalla vielä on Internet Explorer 6. Korjaan bugit tänä iltana. Siihen asti ja sen jälkeenkin, suosittelen käytettävän Firefox 3, Opera tai Safari -selaimia.
Minä unohtaisin suosiosta IE6:n, mutta mikäli käyttäjäloki näyttää toista, niin kai IE6:n käyttäjätkin pitää sitten ottaa huomioon.
Otaksun, että yseessä lienee aivan pienestä div osioiden leveyden hienosäädöstä. Kaventamalla keskipalstaa tai oikeata marginaalia pitäisi asian korjaantua. Nyt oikea marginaali ei “mahdu”, joten se rivittyy muiden palstojen alle.
Voisiko div id =navi leveys 450 aiheuttaa ongelman? Kaikkien muiden keskipalstassa olevien laatikoiden leveys on 440.
En ole itseasiassa vielä ehtinyt/jaksanut perehtyä koko ongelmaan, kun uusilla selainversioilla toimii ok. Pitää tuo CSS käydä läpi vielä jossain vaiheessa kuitenkin. Leveyksien ja marginaalien lisäksi laittaa muutamaan kohtaan ehtoja, jos on IE6 tai vanhempi, tehdään eri tavalla.
Uteliaisuuttani selvitin ongelmaa ja selitys löytyi. IE6 tulkitsee float: right; määrityksen samoin kuin kuvien align=right määrityksen. Kohde jolle määritys annetaan pitää olla ennen niitä elementtejä joiden oikealle puolelle kohde halutaan laittaa.
Korjaus:
Joko koko ’sidebar2′ elementti siirretään html:ssä ennen ’sidebar1′ ja ‘content’ elementtejä TAI yksinkertaisesti muutat sidebar2:n tyylimääritykseksi float: left; kuten muillekin sarakkeille.
Korjaus edelliseen. Kyllä tuo float: right; saattaa joissain tapauksissa aihettaa vastaavaa, mutta koitin vielä huvin vuoksi ladata koko sivun koneelle ja testata. Osoittautui, että ensimmäinen veikkaukseni osui sittenkin oikeaan eli sarakkeiden leveydet ylittävät sallitun tilan.
Viimeisin korjausehdotus:
Koita ottaa #sidebar1 leveydestä hieman pois, eli määritä sen leveydeksi esim. 205px. Paljosta ei ole kyse, mutta IE6:n erilainen tapa tulkita elementtien marginaalien leveyksiä johtaa #wrap elementissä säädetyn 800 pikselin leveyden ylittymisen ja sen takia ylimenevä osuus rivittyy alapuolelle.
Innostuin testaamaan tätä, koska itselläni on ollut vastaavankaltaisia ongelmia. Tosin tuolloin oli kyse siitä, että marginaali rivittyi alapuolelle, koska olin laittanut vasempaan palstaan ylileveän kuvan.
Kiitos tutkimuksista! Tutkailen aihetta varmaan vielä tämän päivän aikana. Jonkin verran (14%) kuitenkin IE6-käyttäjiä sivuilla käy.
Jep, sidebar2:n tasaaminen vasempaan reunaan ei riittänyt, sillä kyse on tosiaan siitä, että IE6:ssa sidebar2 ei mahdu wrap elementissä määrättyyn 800 pikseliin muiden palstojen rinnalle. Helpoin konsti on ottaa jonkin palstan leveydestä 5 pikeliä pois. Suosittelen sidebar1 kaventamista 205 pikseliin, niin aiheuttaa vähiten muutoksia.
Unohdinkin kokonaan, että piti tuota töissä testata. IE on aina yhtä mielenkiintoinen näissä asioissa. Olin eilen laskevinani, että palstojen leveydet ja reunoilla olevat marginaalit eivät ylitä 800 px. Hitsi kun olen hukannut linkin, jonka aikoinani löysin. Muistan nimittäin, että on olemassa ohjelma, jolla voi simuloida vanhempia IE-versioita. Pitänee täsmätä tuo töissä valmiiksi.
*edit* Ei riittänyt 5 px, piti ottaa 10 px pois. No, nyt ainakin tuo on korjattu. Pitää katsoa muita, pienempiä ongelmia myöhemmin.
Nyt on hyvä myös IE6:ssa :) Internet Explorerit tosiaankin tulkitsevat muista selaimista poiketen ainakin CSS:n “margin” tyylimääritysten leveydet, mikä aiheuttaa tämänkaltaisia ongelmia.