Ajax - CSS-Elemente verschieben sich nicht, wenn dynamisch Inhalte hinzugefügt werden

[J!M!]

Hallo.

Ich lade zuerst einen Inhalt in "#main #top #content"über Ajax. Wenn dieser Inhalt geschrieben wird, dann verschiebt sich "#main #bottom" wie i möchte nach unten.

#main
{
display: block;
position: relative;
margin-top: -330px;
margin-left: 320px;
}

#main #top
{
display: block;
position: relative;
width: 660px;
height: 450px;
background-image: url(../../images/top.png);
background-repeat: no-repeat;
z-index: 69;
font-family: Candara;
font-size: 70px;
font-weight: bold;
color: #FFFFFF;
padding-top: 15px;
padding-left: 40px;
}

#main #top #content
{
}

#main #bottom
{
display: block;
position: relative;
float: left;
margin-left: 95px;
margin-top: -15px;
width: 567px;
height: 173px;
background-image: url(../../images/bottom.png);
background-repeat: no-repeat;
}

Doch dann möchte ich durch einen Klick auf einen Javascript-Link erneut einen Inhalt per Ajax laden. Wenn dieser Inhalt geschrieben wird, verschiebt sich "#main #bottom" im Firefox nicht mehr nach unten, im IE7 komischerweise schon.
Zu sehen auf Hanrun Hu's Website und dann unter Home->Announcements. Beim Klicken auf "Read Comments" sollen die Kommentare geladen werden.

#main #top #content #topic_x
{
position: relative;
float: left;
margin-left: 80px;
width: 450px;
margin-bottom: 30px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350; 
}

#main #top #content #topic_x .comments
{
display: block;
position: relative;
margin-top: 5px;
margin-left: 0px;
padding-left: 20px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350; 
}

Auch wenn ich ".comments" zu "#comments" ändere verschiebt sich "#main #bottom" nicht.

MfG J!M!

 

[anna55]

Beim Klicken auf "Read Comments" sollen die Kommentare geladen werden.

Bei mir werden die Kommentare im FF geladen. Hast Du da vielleicht nen Blocker aktiv?

 

[J!M!]

Die Kommentare werden geladen, ja. Das is nicht das Problem. Das Problem is, dass wenn sie geladen werden, dann verschiebt sich (das Bild in) #main #bottom sich nach unten, was dazu führt dass Text das Bild überlagert. (Man sieht es wenn man auf Read Comments klickt und dann bis ganz nach unten scrollt.)

 

[anna55]

Trenn mal die einzelnen Bezeichnungen im CSS mit einem Komma, und zwar überall:
#main, #bottom

 

[Albu]

worin besteht eigentlich der Unterschied zwischen
"#main #top #content #topic_x"
und
"#topic_x"

Weil mir erschließt sich gerade nicht der Sinn der absoluten Referenzierung von IDs.

[edit]@anna55: ich denke, das ist so gewollt... nur halt unnötig[/edit]

 

[J!M!]

Bedeutet das dann aber nicht, dass Elemente aufgezählt werden und nicht etwa "bottom, das in main ist"? Wie z.B.:

body, html
{
margin: 0px;
padding: 0px;
width: 1025px;
}

 

[J!M!]

@Albu
Ähm... ich seh nicht wo i einmal "#main #top #content #topic_x" und einmal "#topic_x" definiert haben soll... Ich hab nur einmal das erstere definiert.

 

[Albu]

@Albu
Ähm... ich seh nicht wo i einmal "#main #top #content #topic_x" und einmal "#topic_x" definiert haben soll... Ich hab nur einmal das erstere definiert.

hast Du nicht, das ist es ja. Wenn man davon ausgeht, dass eine ID nur einmal im Dokument vorkommt, warum musst Du sie umständlich referenzieren, wenn Du es direkt könntest?
Das hat jetzt höchstens mittelbar mit dem tatsächlichen Problem zu tun, es könnte höchstens für mehr Übersichtlichkeit in der CSS sorgen und dadurch Wald und Bäume voneinander trennen.

 

[J!M!]

aso, ja. ähm.. als i das css geschriem hab hab i nicht so auf die unterscheidung zwischen class und id geachtet, sondern immer nur schnurstracks id#s verwendet. bin jez zu faul um das umzuändern.

ähm.. hast du eine idee bezüglich meines problems?

 

[J!M!]

Okay, ein kleiner troubleshoot von mir ergab: #bottom is außerhalb von #top und abhängig von der Höhe von #top; werden die #comments geladen, werden die folgenden div's, die ebenfalls wie #comments _in_ #top sind nach unten verschoben durch "position: relative;" die Höhe von #top allerdings wird dadurch nicht geändert, deswegen verschiebt sich auch #bottom nicht.
warum es klappt wenn ich die Announcements selber lade liegt wohl darin, dass i, wenn die Announcements geladen werden, i direkt in #top schreibe mit getElementbyID('top'), wenn i aber die Comments lade dann schreibe i nur in #comments rein, so dass im Prinzip nicht #top neu geschrieben wird, sondern nur ergänzt wird. Und FF kriegt diese Neuerung iwie nicht mit... -.-
hmmm... jemand ne idee..?