CSS problem: tekst glir over annen tekst

[kjetil_b]

Sliter med et css problem på ei side jeg lager.

 

Har en sidebar med bokser ned langs siden.

<div class="boks"> 
<div class="overskrift"> <h3>Meny</h3> </div>
<ul type="circle" class="liste">
<li><a href="index.html">Forside</a></li>
<li><a href="omoss.html">Om Oss</a></li>
<li><a href="tjenester.html">Tjenester</a></li>
<li><a href="referanser.html">Referanser</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul> </div>

<div class="boks"> 
<div class="overskrift"> <h3>Kontakt</h3> </div>
Her kommer kontaktinformasjon etterhvert.
</div>

 

Dette fungerer da fint, men når jeg øker skriftstørrelsen et hakk i Firefox så glir det siste elementet i menylista under Kontakt overskrifta(og da bak et bakgrunnsbilde).

I IE går dette fint og boksene er fleksible og flytter seg ettersom skrifta øker.

Kjipt at det er bedre i IE..

 

div.boks {
margin: 0px 0px 25px 0px;
width: 150px;
height: 150px;
text-align:left;
padding: 3px;
display: block;
}

div.boks ul  {
list-style: none;
margin: 0;
padding: 0;
}
div.boks li {
background:#f2f2f2;
line-height: 1.5em;
border-bottom: 1px solid #C0C0C0;
padding: 0.5em 15px;
}

 

Har prøvd flere ting nå, men det går bare ikke. Teksten overlapper neste boks, noe som gjør sida heller snodig for de som trenger større skrift.

 

Kjekt hvis noen har tips om hvordan jeg kan fikse dette