Tämä on kai oikeasti joku standardi-juttu, mutta ongelmanani on CSS:llä määritettynä div-elementin leveys.
Se pitäisi nimittäin olla pisteelleen 200px (koska kuva sen yllä on tarkalleen 200px), mutta divin sisällä pitäisi olla myös jonkinlainen reunus, ettei teksti ala heti reunasta.
Reunuksen määritys siis lisää divin leveyttä ja näin se ei enää passaa kuvan kanssa, jonka pitäisi yhdessä divin kanssa muodostaa "ikkuna".
Onko mahdollista määrittää leveys reunusten kanssa niin, että se pelittää niin IE:llä, FF:llä kuin Operallakin?
Vähennä leveydestä reunuksien paksuuden verran, esim. width: 198px; border: 1px solid #000;
Oho, käytinkin nyt reunus-sanaa, tarkoitus oli oikeasti kyllä käyttää marginaalia (tai ihan margin, olisi varmasti tutuin nimitys)...
Marginin ei muistaakseni pitäisi levittää elementtejä, mutta padding niin tekee (standardien mukaan). Toisaalta IE:ssä padding ei levitä elementteja, kuten se vaikka Firefoxissa ja Operassa tekee.
Googlella "ie box model hack" löytyy paljon osumia, sillä ongelma on hyvin laajalti tunnettu (ymmärrettävästi):
http://www.google.fi/search?q=ie box model hack&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:fi-FI:official
Sen sijaan että antaisi itse elementille paddingia, kannattaa antaa sen sisällölle (eli tekstille tässä tapauksessa) marginaalia, jolloin ei tule ongelmia eri selainten kanssa. Toki noita laatikkomallikikkoja löytyy monennäköisiä, kuten JTS tuossa jo opasti, mutta ehkä tuo on kuitenkin vaivattomin keino kiertää ongelma.
IE6:n saa standardimoodiin ja toimimaan laatikkomalliltaan samalla tavalla kuin Firefox. Ongelmaksi tietty jää IE6:n edeltäjät, mutta niitä käytetään niin vähän ettei taida tässä tapauksessa olla kovinkaan merkittävä ongelma.
IE6:n standarditilan saa kuitenkin päälle sillä, että strict-muotoinen <!DOCTYPE alkaa ensimmäiseltä riviltä ensimmäisestä merkistä. Tämän jälkeen IE:n laatikkomalli vastaa kaikkien muiden selaimien mallia.
Ongelman voi myös kiertää tietysti toisella tavalla, joka toimii myös IE5:llä: antaa isännöivälle elementille leveyden (mutta ei paddingia tms.) ja sitten säätää borderit ja paddingit sisempään diviin. Koska divit vievät aina automaattisesti kaiken saatavilla olevan tilan, tulee laatikosta halutun levyinen.
IE:n viat voi tietty myös korjata käyttämällä conditional comment -tekniikkaa:
<!--[if lte IE 6]><link rel="stylesheet" href="ietyyli.css" type="text/css"><![endif]-->
Tämä ei riko standardeja tai muita selaimia, koska muut selaimet näkevät tuon kommenttina.
<html>
<head>
<title>Esimerkki joka toimii kaikilla selaimilla laatikkomallista riippumatta</title>
<style type="text/css">
* { border : 0; margin : 0; padding : 0; }
#dokumentti {
width : 200px;
}
#otsikko {
background : #DDD;
}
#sisalto {
background : #EEE;
border : 1px solid black;
padding : 10px;
}
p { padding : 5px; }
</style>
</head>
<body>
<div id="dokumentti">
<h1 id="otsikko"><img alt="Otsikko" src="otsikko.jpg" /></h1>
<div id="sisalto">
<h2>Minun sivu</h2>
<p>Testisivuhan se.</p>
</div>
</div>
</body>
</html>Aihe on jo aika vanha, joten et voi enää vastata siihen.