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;

}[/HTML]

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.

[HTML]#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!

[geloescht_JesterDay]

Wieso hast du denn überhaupt position: relative? Du nutzt nirgendwo eine Positionsangabe, also lass das doch ganz normal.

ansonsten kann ich das Problem auf der Seite nachvollziehen, nur einen echten Grund dafür sehe ich erstmal nicht.

wie gesagt, probier mal das position: relative wegzulassen.

Mehr fällt mir so auf Anhieb nicht ein. (Und die Angaben von dir sind auch eher knapp, ich hab keine Lust die ganze Seite auseinander zu nehmen jetzt )

[Toothrot]

Dass es generell eine eher schlechte Idee ist, sämtliche Inhalte per Javascript zu laden, sieht man sehr schön an diesem Beispiel. Man sieht nämlich nicht oder nur umständlich, was da letzten Endes für HTML-Code zusammengekleistert wird. Von der Zugänglichkeit mal ganz abgesehen.

Du solltest als erstes sämtliche Fehler im eigentlichen Quelltext ausmerzen. Das geht zum Beispiel gar nicht:

<a href=javascript:load_subnav_and_content(escape("Home"), escape("home.png"));>

Da kann der Browser bestenfalls raten, was er machen soll.

Außerdem werden verschiedene IDs mehrmals vergeben, was nicht sein darf. IDs müssen einzigartig sein. (Z.B. #topic_x, #date, #subject)

Vermutlich sind noch mehr solcher Fehler vorhanden, die nur schwer zu finden sind, weil sie nicht im Quelltext stehen.