Yeni bir tema yapıyorum ama bi yerinde takıldım yarım saattir birçok yöntem denedim ama beceremedim. Ney bunun mantığı bilen var mı?

İlk resim FF den, ikinci resim IE7 den.. IE7 kelimeler arasındaki boşluklarda alt satıra tam atlayamıyor ff gibi eğer sığmıyorsa komple alt satıra geçirmesi lazım nerde yanlışım var çözemiyorum

<div class="kategoriler">
<h1>Kategoriler</h1>
<ul>
<li><a href="#">Astroloji</a></li>
<li><a href="#">Güncel Haberler</a></li>
<li><a href="#">Kadınlara Özel</a></li>
<li><a href="#">Fıkralar</a></li>
<li><a href="#">Şarkı Sözleri</a></li>
<li><a href="#">Sağlık</a></li>
<li><a href="#">Şiir</a></li>
<li><a href="#">Aşk Meşk</a></li>
<li><a href="#">Güncel Haberler</a></li>
<li><a href="#">Kadın 12lara Özel</a></li>
<li><a href="#">Fıkral dsaar</a></li>
<li><a href="#">Şarkı Sö asdz leri</a></li>
<li><a href="#">Sağlık asd</a></li>
<li><a href="#">As d</a></li>
<ul>
</div>


.kategoriler{width:270px; float:left;}
.kategoriler ul{list-style:none; padding-left:0px;}
.kategoriler li{float:left; margin:5px 10px 0px 0px; }
.kategoriler li:hover{}
.kategoriler ul li a{background:#eeeeee; padding:1px 5px 1px 5px; line-height:18px;}
.kategoriler ul li a:hover{background:#76bad2; color:#fff;}