Probleme mit div und listen

[tufan]

hallo liebes Forum,

ich gestalte seit ein paar Tagen unsere Webseiten gemäß XHTML 1.0 Transitional um. Dabei bin ich auf zwei Fragen gestoßen, auf die ich alleine keine Antwort finden konnte; ich hoffe ihr könnt mir weiterhelfen.

Die erste betrifft <div>:
Ich habe diverse Verschachtelungen auf der Seite mit bspw. folgender Form:

+---------------------+
| Elternelement       |
| +-----------------+ |
| |kind1            | |
| |                 | |
| +-----------------+ |
|                     |
| +-----------------+ |
| |kind2            | |
| |                 | |
| +-----------------+ |
+---------------------+
Meine style-Angaben dazu:

  
#newscontainer /* Elternelement*/  
{ width: 280px; float: left; margin-top: 15px; padding-left: 5px; overflow: visible; }  
.newsbox  
{  
padding: 5px 15px 5px 5px;  
float: left;  
width: 100%;  
min-height: 140px;  
height: 170px;  
max-height: 200px;  
background: #1C5EC6 url(../box.bg.br.gif) right bottom no-repeat;  
overflow: visible ;  
text-align: left;  
font-weight: normal;  
font-size: 8pt;  
font-family: verdana, arial;  
color: #fff;  
}  

Ich hätte gerne, dass die Höhe des Elternelements dynamisch mitwächst (also ausgedehnt wird) falls die inhalte der Kinderelemente mehr Platz beanspruchen würden. Genau dieses macht IE mit oveflow: visible;
Ist es möglich dieses Verhalten auch bei FireFox zu erreichen ?

Mein zweites Problem zu dem ich keine Erklärung habe betrifft die Listendarstellung im Internet Explorer. Meine Liste sieht im Firefox genauso aus, wie sie sein sollte. Aber, bei Internet Explorer rückt immer der Inhalt des ersten <li>-Elements sehr weit nach rechts. Die darauf folgenden <li> Elemente werden wiederum richtig dargestellt.
Die Style-Angaben dazu:

  
#commentlisting  
{  
clear: both;  
position: absolute;  
top: 290px;  
width: 296px; /*for IE */  
padding: 0px;  
text-align:left;  
}  
div[id]#commentlisting  
{  
width: 300px;  
}  
#commentlisting ul {  
display:inline;  
color:#000;  
font-weight:bold;  
font-size: 7pt;  
font-family: verdana,arial,helvetica sans-serif;  
}  
  
#commentlisting li {  
list-style: url(../../system/icons/next.gif) inside;  
padding:2px;  
border-bottom:1px solid #990000;  
background: #fff;  
}  
  
#commentlisting a {  
font-size: 7pt;  
font-weight: bold;  
text-decoration:none;  
color:#000;  
}  
#commentlisting a:hover {  
text-decoration:underline;  
}  

der Aufruf per PHP:

  
<div id="commentlisting">  
<ul>  
<?php  
 do  
 {  
 ?>  
 <li><a href="modules.php?op=<?=$opcode_img?>&amp;startPos=<?=$start?>&amp;galID=<?=$row->galID?>&amp;page=0"><?= preg_replace("[<br />]", "", shortText($row->eintrag, 40));?></a></li>  
 <?php  
 }  
 while ($row = mysql_fetch_object($selectQuery->_result));  
?>  
</ul>  
</div>  

(Hier ist ein Screenshot von der Liste. )
Ich habe Infos zu etlichen IE-Bugs durchgelesen bis jetzt aber weder ein entsprechendes Bug noch eine Erklärung dafür gefunden. Weiss jemand, warum sich IE in diesem Fall komisch verhält und wie man es ihm richtig beibringen kann?

Vielen Dank im Voraus,

und Grüße aus Berlin,

tufi