Ich habe auf einer Seite einen DIV, welchen ich dynamisch per Javascript mit Inhalt fülle.

Die Größe des DIVs passt sich dabei manchmal an, aber überwiegend behält der DIV einfach die Größe, welche er beim ersten Rendern der Page hatte (als er also noch keinen Inhalt hatte).

Gibts die Möglichkeit das Verhalten mittels css irgendwie zu beeinflussen?

HTML-Code:

<div id="navigation_main"></div>

Relevantes CSS

HTML-Code:

<style type="text/css">
td,th,div {
	text-align:left;
}
#navigation_main a, #navigation_misc a {
	display:block;
	border:none;
}
#navigation_main, #navigation_misc {
	float:left;
	width:132px;
	padding:0px 0px 0px 0px;
	background-repeat:no-repeat;
	background-position:top left;	
}
#navigation_main {
	padding-top:38px;
	background-image:url(..);
}
</style>

Hi,

vermutlich hilft dir hier mein Webmaster-FAQ-Artikel [CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an? weiter, wenn ich im CSS-Code die float:left-Deklaration betrachte.

mfg Maik

Leider nicht.

Es geht ja um Links, die in den DIV eingefügt werden, und die haben keine float:left-Deklaration. Das Sonderbare ist, dass sich die Größe des DIVs korrekt anpasst, sofern man die Links fest in die HTML-Datei schreibt und nicht per Javascript einträgt.

HTML-Code:

<div id="navigation_main">
  <!-- Diese Links werden per Javascript eingefügt -->
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

Kompletter HTML-Code
CSS Datei 1
CSS Datei 2

Und was soll ich mit den Codeschnipseln anfangen, wenn das Problem erst beim JS-Generieren der Links auftritt, und darin von diesem JS-Code überhaupt nichts zu sehen ist?

Der Link zu einem Live-Beispiel wäre da hilfreicher.

Tritt das Problem eigentlich in allen Browsern auf, oder nur in einem Speziellen?

mfg Maik

dann links auf Navigation, mit der Maus links oder rechts über den Menübereich fahren, dann kannst du einen Link einfügen.

Kommentier hier mal diese Angabe zum Test aus:

Code :

1 2 3 4 5 6 7 8

#navigation_main, #navigation_misc {     float:left;     [B]display:inline-block;[/B]     width:132px;     padding:0px 0px 0px 0px;     background-repeat:no-repeat;     background-position:top left;   }

mfg Maik

Hatte ich auch schon mal ausprobiert, leider ohne Erfolg.

Das Design, was zurzeit im Interface ist, hat gar keine display-Anweisungen. Hier die CSS-Datei:
http://pastebin.com/d4d9dfca5

Zitat von Maik

Tritt das Problem eigentlich in allen Browsern auf, oder nur in einem Speziellen?

Vielen Dank für die Rückmeldung!

Hab's jetzt nochmal durchgespielt, und das Problem tritt bei mir nur im Firefox auf. Im IE, Opera und Safari "wächst" das Element in der Höhe mit.

mfg Maik

Also ich habe es mit IE, Firefox und Chrome ausprobiert; manchmal tritt das Problem auf, manchmal funktioniert es auf wundersame Weise.

Die einzige Lösung, die ich momentan sehe, ist die Höhe des DIVs per Javascript an die Höhe der Childnodes anzupassen.

Im Prinzip kann der Thread gelöscht werden, das Problem hatte überhaupt nichts mit CSS zu tun, sondern wurde durch Javascript verursacht, welches die Größe des DIVs auf die ursprüngliche Größe (nach erstem Laden der Seite) verringert hat.