IE 6 ja lohkojen koko

Internet Explorer 6 laskee väärin lohkojen koon. Suositus määrää, että lohkon koko muodostuu kaavasta: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right, ts. jos määrää lohkon kooksi 100 % (width: 100%), niin tähän päälle lasketaan vielä marginaalit, padding ja rajat.

Internet Explorer 6 laskee kuitenkin kaikkien marginaalien, rajojen ja paddingin ja sisällön yhteisleveydeksi saman mitä määritellään width-ominaisuudella. Ts. IE 6:n lohkoissa on vähemmän tilaa!

Korjaus

Jos on pakko saada jokin asia toimimaan IE 6:ssa samoin kuin muualle käytetään kahta sisäkkäistä lohkoa. Sisemmälle määritellään haluttu leveys (width) ja nollataan marginaalit, rajat ja padding. Ulommalle ei määritellä kokoa, mutta määrätään halutut marginaalit, rajat ja padding.

<div class="ulompi">

<div class="sisempi></div>

</div>

Tämän pitäisi mahtua näytölle sekä IE 6:ssa että muissa selaimissa.

.ulompi {
  margin: 1%;
  padding: 1%;
  border: 5px solid black;
  background-color: yellow;
}

.sisempi {
  width: 100%;
  margin: 0;
  padding: 0;
}

Tämä mahtuu näytölle vain IE 6:ssa.

.ie {
  width: 100%;
  margin: 1%;
  padding: 1%;
  border: 5px solid black;
}