2 konkrete browserproblemer med CSS

Jeg har et problem med at få vist en baggrund i IE6 (det virker i både FF og IE7):

<div id="content">
  <div id="submenu"></div>
  <div id="main"></div>
  <div id="margin"></div>
  <div id="foot"></div>
</div>

I min content har jeg en baggrund som er "repeat: repeat-y", dvs. den viser en pæn baggrund som stopper når foot har "clear: all". På den måde kan man ikke se at div'erne ikke er lige høje.
Jeg har to layouts, en med både submenu, main og margin (dvs. 3 kolonner) og en med kun submenu og main (dvs. 2 kolonner). Det underlige er, at baggrunden fremkommer i layoutet med de 2 kolonner, men ikke i layoutet med de 3. Den _eneste_ forskel er at jeg fjerner den ene div.

Her er css:
#content {
    background: url("/images/gfx/background.png");
    background-position: top;
    background-repeat: repeat-y;
    margin-top: 0px;
    padding-top: 10px;
    min-height: 450px;
}
#submenu {
    padding-left: 15px;
    padding-right: 0px;
    margin: 0px;
    padding-top: 0px;
    width: 165px;
    float: left;
}
#main {
    width: 390px;
    padding-left: 20px;
    padding-right: 10px;
    float: left;
}
#margin {
    width: 170px;
    float: left;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    overflow: hidden;
}
#foot{
    clear: both;
    height: 2px;
}

I kan se situationen på www.uc-glostrup.dk, hvor der er sider med både 2 og 3 kolonner - bruger I IE6 kan I se forskellen!

Yderligere har jeg et problem med FF, hvor teksten nogle gange går "igennem" layoutet nederst. Fejlen sker dog kun én gang, refresher man, retter siden sig ind. Kan det være fordi der ikke er defineret højde på billederne? Eller kan der være andre grunde? Se evt. situationen her: http://www.uc-glostrup.dk/ungdomsskolen