margin-problem bei div-in-div im IE

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • margin-problem bei div-in-div im IE

    Hallo,
    seit ca. 4 Stunden nun plage ich mich mit einem Problem rum, deren Lösung mir einfach nicht in Kopf kommen will. Bei Google&Co. konnte ich leider nichts finden, was dieses Problem explizit aufgreift.
    Und zwar habe ich einen Div (1) mit einem festgelegten Hintergrundbild. Innerhalb des Divs befinden sich 2 weitere - einer mit festgeschriebener Größe (headline-Bild als Hintergrund) (2) sowie einer der zu gegebener Zeit mit textlichem Inhalt (3) aus einer DB gefüttert werden soll.
    Problem: Der Ursprungs-Div an den die integrierten beiden anderen per "position:relative" gebunden sind veändert im IE totz "height:100%" je nach dynamischen Textinhalt nicht optimal seine Höhe. Im Feuerfuchs ist alles prima.
    Ansatz (vermuteter Grund): Der 3. Div orientiert seine Position mit margin-top sowie -left an dem 2. Div. Diese veränderung scheint sich nicht auf die Länge des 1. Divs auszuwirken bzw. scheint der diese eben nicht zu beachten, denn ohne margin im 3. Div scheint die Höhe beider Divs identisch zu sein.

    So, denn hoff ich mal jemand hat eine Idee?!

    Hier mal der Code:

    Code:
    <div style="z-index:5; position:relative; top:20px; left:30px; width:450px; height:100%;
    background-image:url(layer_big_bg.png); background-repeat:y-repeat;">
    <div style="z-index:6; position:relative; top:0px; left:0px; width:450px; height:27px; 
    background-image:url(news_layer_hl.png);">
    </div>
    <td>
    <div style="z-index:6; position:relative; top:3px; left:10px; width:430px; height:100%;">
    <font color="#a21b04">03/21/08:</font> <font color="#b15627">Our website is up now!</font><br />
    <font color="#999999">blaaaaaaaa<br />blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks<br />
    blakeksblakeksblakeksblakeks</font>
    </div>
    </div>
    Zuletzt geändert von KillUrMind; 24.03.2008, 02:00.

  • #2
    wieso arbeitest du eigentlich mit positionierungen? das kannst du auch mit margins ereichen. und welche doctype hast du angegeben? da liegt nämlich der hase im pfeffer.

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Hallo,
      also ich habe nun herausgefunden wo das Problem explizit fundamentiert zu sein scheint. Und zwar wird ganz einfach der Hintergrund.png in Div 1 nicht weiter nach unten hin wiederholt, obwohl es angegeben ist.
      Keine Ahnung woran es liegt....Doctype habe ich schon alle durch und es ändert sich nix...ob strict, trans oder whatever.
      Was vielleicht auch noch wichtig ist: Ich habe um die PNG's darstellen zu können einen iepngfix.htc integriert - vielleicht ist dieser dafür verantwortlich?!
      Das mit den Positionierungen ist eine gute Frage...ich dachte das wäre eine unabdingbare Sache hinsichtlich meiner (veralteten) Tabellen-Div-Verschachtelung!?

      Hier einmal der Link zur Seite (Quelltext wirkt mglw. etwas konfus - no pro):
      affect music

      plzzzz help me

      Kommentar


      • #4
        also ich sehe immer noch tabellen ohne ende. und dreamweaver-code

        als erstes solltest du mal validen code erzeugen, dann kannst du dich wieder melden.

        gruß
        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          Das mit den Positionierungen ist eine gute Frage...ich dachte das wäre eine unabdingbare Sache hinsichtlich meiner (veralteten) Tabellen-Div-Verschachtelung!?
          Schmeiß die ganze Tabellen raus - für Header und Footer kann man ganz toll Container nehmen, so ein Menu realisiert man am besten mit einer Liste. Und wie Kropff schon sagt verzichte auf die ganze relative und absolute Positionierung und benutz padding und margin. Am besten schaust du dir bei Kropff mal ein Tutorial über CSS basiertes Design an - dann lösen sich einige Probleme (zum Beispiel die unnötigen hover-Grafiken im Menü).
          OffTopic:
          Nette Grafiken übrigens - die solltest du allerdings mal ein wenig größer machen - ab 1280 aufwärts wirds unschön.
          Die Regeln | rtfm | register_globals | strings | SQL-Injections | [COLOR=silver][[/COLOR][COLOR=royalblue]–[/COLOR][COLOR=silver]][/COLOR]

          Kommentar


          • #6
            Alles klar, dann werde ich mich mal daran machen, es dahingehend zu ändern....was ein Kampf
            Eine Sache die nicht in meinen Kopf möchte ist die Sache mit den Doctypes etc. pp.
            Was soll ich nehmen, also ich habe schon einiges darüber gelesen, werde jedoch nicht wirklich schlau draus....gibts na nen speziellen Vorschlag?

            OffTopic:
            @tont.: danke. bei mir siehts auch bei 1280 noch prima aus?!

            Kommentar


            • #7
              Eine Sache die nicht in meinen Kopf möchte ist die Sache mit den Doctypes etc. pp.
              siehe hier, hier und hier

              gruß
              peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar


              • #8
                Alles klar,
                ich habe mich einmal deinem Vorschlag mit xhtml 1.0 angeschlossen.
                Nun eine weitere Frage hinsichtlich des neuen Aufbaus: Wie realisiere ich die von dir vorgeschlagenen Listennavigation mit meinen ganzen Bildern und den Mouseover-Sachen (die der Validator als falsch ankreidet?!)?
                Danke für Eure Hilfe!!!!

                Kommentar


                • #9
                  Nun eine weitere Frage hinsichtlich des neuen Aufbaus: Wie realisiere ich die von dir vorgeschlagenen Listennavigation mit meinen ganzen Bildern und den Mouseover-Sachen (die der Validator als falsch ankreidet?!)? Danke für Eure Hilfe!!!!
                  Für das Menu benutzt du eine Liste ohne Punkte bei der die Listenelemente inline gerendert werden. Den ganzen Mouseover Mist schmeißt du raus und benutzt die CSS Pseudoklasse :hover. So jetzt keine Fragen mehr liebe Kinder - selber Informieren ist angesagt.
                  OffTopic:
                  @tont.: danke. bei mir siehts auch bei 1280 noch prima aus?!
                  Das Stichwort lautet ab ... aufwärts. Bei 1920 ist das mehr so ein Klecks in der Mitte.
                  Die Regeln | rtfm | register_globals | strings | SQL-Injections | [COLOR=silver][[/COLOR][COLOR=royalblue]–[/COLOR][COLOR=silver]][/COLOR]

                  Kommentar


                  • #10
                    Leider habe ich doch noch eine Frage
                    Und zwar bin ich zu allererst schonmal froh darüber, dass mein code
                    nun valide ist
                    Jedoch: Wie man sehen kann (im IE6 - FF macht was er will), habe ich die Navigation zwar nun in
                    einer horizontal ausgerichteten Liste untergebracht, jedoch läuft der
                    Befehl float:left lt. der css nur auf den verlinkten Bildchen. Was ist
                    aber mit den "blinden" zwischendrin? Auf "<li>" funzt float:left ja nicht.
                    Wie schaffe ich es, alles in eine Reihe zu bekommen? Sicherlich ist es
                    was ganz offensichtliches, nur mir will es nicht in den Kopf.
                    Und nochwas: Wieso ist zwischen Navi und headerbild 1-2px abstand?

                    Hier die css: css

                    Sorry, falls die ganzen Fragen nerven, nur ich bin halt nur table-arbeit gewöhnt....:

                    Dankedankedankedanke....
                    Zuletzt geändert von KillUrMind; 23.03.2008, 21:29.

                    Kommentar


                    • #11
                      Ao Problem selbst gelöst, danke nochmal!

                      Kommentar


                      • #12
                        Soweit so gut, habe nun alles in Container gepackt und werde wie mir scheint nun noch für jeden IE ne extra CSS anlegen müssen.
                        Eine Sache klappt bislang jedoch nicht mehr, die height-Interpretation, die spinnt mit 100% irgendwie überall (IE6,IE7,FF). Jemand ne Ahnung wieso, bzw. wie ich das gerichtet bekomme?

                        Vielen Dank schonmal!

                        Seite
                        CSS
                        IE6-CSS

                        Kommentar


                        • #13
                          So, alle Probleme beseitigt + valider Code!
                          Danke nochmal an alle für Eure Hilfe!

                          *closed*

                          Kommentar

                          Lädt...
                          X