✔ DIV passt sich nicht an

N

nhoj

Mitglied

• 15. Februar 2009

• #1

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:

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

Relevantes CSS

HTML:

<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>

 

M

Maik

• 15. Februar 2009

• #2

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

 

N

nhoj

Mitglied

• 16. Februar 2009

• #3

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:

<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

 

M

Maik

• 16. Februar 2009

• #4

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

 

N

nhoj

Mitglied

• 16. Februar 2009

• #5

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

 

Zuletzt bearbeitet: 16. Februar 2009

M

Maik

• 16. Februar 2009

• #6

Kommentier hier mal diese Angabe zum Test aus:

Code:

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

mfg Maik

 

N

nhoj

Mitglied

• 16. Februar 2009

• #7

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

 

Zuletzt bearbeitet: 16. Februar 2009

M

Maik

• 16. Februar 2009

• #8

Maik hat gesagt.:

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

Zum Vergrößern anklicken....

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

 

N

nhoj

Mitglied

• 16. Februar 2009

• #9

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.

 

N

nhoj

Mitglied

• 16. Februar 2009

• #10

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.