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).
Muuten tuo oli hyvä, mutta itse elementin leveys oli itseasiassa 210 pikseliä firefoxissa. Niinpä tuon sai korjattua helposti pienellä nesting-järjestelyllä.
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.
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.
2 kommenttia:
Tuohon ongelmaan on paljon yksinkertaisempi ratkaisu. Muuta doctype semmoiseksi että selaimet toimivat standarti modessa, nyt IE ja muutkin toimii quirks modessa (http://www.cs.tut.fi/~jkorpela/quirks-mode.html) jolloin IE tulkitsee hieman erilailla noita juttuja kuin muut selaimet.
http://hsivonen.iki.fi/doctype/ listauksen avulla on helppo valita sivuillesi sopiva.
Hyvin monet IE:n "ongelmista" johtuu juurikin väärästä doctypestä. Kun se on kunnollinen niin IE:n renderöinti moottorin toiminta ei eroa paljoakaan muiden selainten moottoreista.
Norsun kokoinen kiitos anonyymille. Vihje oli killeri ja hoiti hommansa vähintäänkin mallikkaasti. Vaikka olin korjannut tuon sivuttaisen vääristymän sisäisillä DIV -elementeillä, olin jättänyt tuon navigaatiossa ilmenneen ongelman paikoilleen. Korjasin nyt tuon doctypen vihjeen perusteella - ja nyt näkyy palkkatieto.net:in ylänavigaatiokin samalta niin IE:llä kuin Firefoxillakin.
Helppoa ja kaunista!
Lähetä kommentti