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

[noName]

Also mir hat bei ähnlichen Problemen folgendes Tutorial dabei Helfen können:

http://www.frixon.de

[tufan]

hallo..

Also mir hat bei ähnlichen Problemen folgendes Tutorial dabei Helfen können:

http://www.frixon.de

danke, werde mir die Beispiele anschauen.

Grüße aus Berlin,

tufi

[wahsaga]

hi,

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.

Das würde es, wenn du .newsbox nicht gefloatet hättest. Gibt es einen Grund, warum du das machst - wenn du sowieso 100% Breite haben willst? Wenn ja, musst du entweder den Container selbst auf floaten, oder hinter den Boxen noch ein Element einfügen, welches mittels clear das floaten wieder aufhebt.

Mein zweites Problem [...]

#commentlisting
{
clear: both;
position: absolute;

clear bei einem Element, dass sich durch absolute Positionierung sowieso außerhalb des Flusses befindet, ergibt m.E. keinen Sinn.

#commentlisting ul {
display:inline;

Warum inline?

der Aufruf per PHP:

Bitte poste keinen serverseitigen Code, wenn du ein clientseitiges Problem diskutieren willst.

gruß,
wahsaga

[tufan]

hallo,

Das würde es, wenn du .newsbox nicht gefloatet hättest. Gibt es einen Grund, warum du das machst - wenn du sowieso 100% Breite haben willst?

es sollen zwei .newsbox'es untereinander sein, und ich wollte sicher gehen, dass sie wirklich untereinander erscheinen. Nach deinem Hinweis habe ich float entfernt.

Wenn ja, musst du entweder den Container selbst auf floaten, oder hinter den Boxen noch ein Element einfügen, welches mittels clear das floaten wieder aufhebt.

aehm.. irgendwie tut es das nicht (in dem Beispiel soll sich .newsbox an den Inhalt anpassen). Aufheben von float in dem Beispiel mit

  
<div style="clear:both"></div>  

clear bei einem Element, dass sich durch absolute Positionierung sowieso außerhalb des Flusses befindet, ergibt m.E. keinen Sinn.

hatte ich übersehen, bzw. vergessen. Der Bereich war zunächst nicht absolut positioniert, habe ihn später wg. des oben genannten Problems umgestellt. Nach deinem Hinweis habe ich clear inzwischen entfernt.

display:inline;
Warum inline?

inline passte sich zwar sehr schön an mein Layout an; aber das war das Problem bei IE; block hat das Problem gelöst. Danke.

Bitte poste keinen serverseitigen Code, wenn du ein clientseitiges Problem diskutieren willst.

sorry, werde ich in Zukunft beachten.

Grüße aus Berlin,

tufi