problem s obrazkem na pozadi

Mam nastaveny blok s pevnou sirkou a libovolnou vyskou, se tremi obrazky na pozadi - obrazek horniho okraje bloku, obrazek prostredni casti (ktera se opakuje) a obrazek spodniho okraje. Funguje to sqele. blok se roztahuje podle textu. Problem nastane ve chvili, kdyz je v boxu mene textu nez velikost obrazků. Pak se nezobrazi vsechny tri obrazky, ale pouze jeden a to spodni. Jak udelam aby se zobrazili vsechny tri obrazky? Kod mam takovy:

html:

 <div id="content">

          <div class="box">

          <div class="boxin1">

            <div class="boxin2">

              <p> text </p>

            </div>

          </div>

          </div>

        </div>

css:

#content {

width: 458px;

}

.box {

width: 458px;

background: url("img/content2.gif") repeat-y 0 0;

}

.boxin1 {

background:transparent url("img/content1.gif") left top no-repeat;

}

.boxin2 {

background:transparent url("img/content3.gif") left bottom no-repeat;

padding: 5px 25px 15px 20px;

}

ano, ale ja to chci optimalizovat i pro IE :) ted me napadlo, co to udelat tabulkove?