marco: Probleme mit Position (firefox/ie)

Hallo zusammen.

Vielleicht kann mir jemand weiterhelfen oder einen Tipp geben. Schaut euch mal folgende Seite im Firefox/Mozilla und im Internet Explorer an.

http://www.neulicht.de/projekt/farideh-styling/

Firefox zeigt alles richtig an (oder jedenfalls wie ich mir das vorstelle ;-).
IE verhunzt.

Mir geht es vorallem um die Flächen in Orange. Da funktioniert etwas mit der Positionierung nicht. Weiß jemand, wo der Fehler liegt?

Ich habe den Code per W3C geprüft. Er ist fehlerfrei.

Wäre über Antwort dankbar.

Gruß

Marco

  1. Hallo,

    Vielleicht kann mir jemand weiterhelfen oder einen Tipp geben.

    vielleicht liegt es daran...
    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.neulicht.de%2Fprojekt%2Ffarideh-styling%2F&warning=1&profile=css2&usermedium=all

    Ich habe den Code per W3C geprüft. Er ist fehlerfrei.

    aber halt nur das html ;)

    mfg NAG

    --
    signatur
    1. Hallo Nag.

      Tippfehler. Aber daran war es leider nicht gelegt. ;-) Ich bin jetzt immerhin ein paar Operationen weiter. Schau mal.

      Kann es sein, dass IE/Firebox die Border-Angaben anders rechnen. Der Firefox rechnet Border innerhalb von width zu. Der IE rechnet Border außerhalb der width zu.

      FF: x + border = width
      IE: border + width = x

      Nur eine Vermutung. Kann das sein.

      Gruß

      Marco

      1. Hallo,

        leider habe ich derzeit keinen IE zum testen.

        aber es klingt so, als würder die das boxmodel weiterhelfen.

        http://www.google.de/search?hl=de&q=box+model&btnG=Google-Suche&meta=

        mfg NAG

        --
        signatur
        1. Das war ein guter Tipp. Danke. Es lag wirklich am Box-Modell. Ich habe das Problem jetzt gelöst.

          Statt eine DIV-Element, habe ich zwei DIV-Elemente genommen und die Eigenschaften praktisch auf zwei Elemente verteilt. Das hat funktioniert. Ist nicht die eleganteste Lösung, aber naja.

          1. Hi,

            Statt eine DIV-Element, habe ich zwei DIV-Elemente genommen und die Eigenschaften praktisch auf zwei Elemente verteilt. Das hat funktioniert. Ist nicht die eleganteste Lösung, aber naja.

            Das ist aus HTML-Sicht zwar wirklich nicht elegant, dafür erspart es aber Browserweichen im CSS. Beides hat Vor- und Nachteile. Und wenn Du den IE6 in den standards compliant mode versetzt hättest, wäre das Problem für die Vorgängerversionen auch nicht behoben.

            freundliche Grüße
            Ingo

  2. Hallo!

    Firefox zeigt alles richtig an (oder jedenfalls wie ich mir das vorstelle ;-).
    IE verhunzt.

    Du hast eine Menge (zu viele) Divs, die absolut positioniert sind, wobei etliche left und right und dazu noch eine Breite aufweisen. Das mag kein Browser, vor allem wenn die Maße nicht zusammenpassen und der IE kann mit right und left gleichzeitig nichts anfagen.
    Weiters geht der IE in den Quirksmodus, wenn oberhalb der Doctype noch der xml- Prolog steht. Damit rendert er dann mit dem fehlerhaften Box-Modell.

    Ich habe den Code per W3C geprüft. Er ist fehlerfrei.

    Er ist valide, aber nicht mehr.

    Grüße
    saltun

    1. Hallo.

      Danke für deine Antwort.

      Du hast eine Menge (zu viele) Divs, die absolut positioniert sind, wobei etliche left und right und dazu noch eine Breite aufweisen. Das mag kein Browser, vor allem wenn die Maße nicht zusammenpassen und der IE kann mit right und left gleichzeitig nichts anfagen.

      Ich habe jede Struktur-Fläche der Seite in einen DIV gepackt. Macht man das nicht? Ich habe gedacht, das wäre besser als ein unflexibles Tabellen Layout. Mit welchem Ansatz könnte man es besser machen?

      Der IE kann nicht über left und right eine Breite eines Elements errechnen?

      Weiters geht der IE in den Quirksmodus, wenn oberhalb der Doctype noch der xml- Prolog steht. Damit rendert er dann mit dem fehlerhaften Box-Modell.

      Ist das ein Fehler, wenn ich den xml-Prolog notiert habe? Macht man das nicht?

      Gruß

      Marco

      1. Ist das ein Fehler, wenn ich den xml-Prolog notiert habe? Macht man das nicht?

        Natürlich kein Fehler. Aber du bringst den IE halt nicht in den standards compliant mode.

        Solande es sich um XML 1.0 handelt und UTF-8 codiert wird, ist die Deklaraton nicht nötig.

        Gunnar

        --
        „Solang wir noch tanzen können
        und richtig echte Tränen flennen,
        ist noch alles offen,
        ist noch alles drin.“
        (Gundermann)
      2. Hallo!

        Ich habe jede Struktur-Fläche der Seite in einen DIV gepackt. Macht man das nicht? Ich habe gedacht, das wäre besser als ein unflexibles Tabellen Layout. Mit welchem Ansatz könnte man es besser machen?

        Da hast Du richtig gedacht. Nur sollst Du nicht das Tabellenlayout mit absolut positionierten Divs nachempfinden.
        Wenn Du nur einen Text irgendwo positionieren willst, brauchst Du dafür kein div - nimm ein passendes HTML-Element wie Überschriften, Absätze, Listen usw. und Du kannst diese genau so positionieren, einrahmen ... wie ein div.

        Der IE kann nicht über left und right eine Breite eines Elements errechnen?

        Der IE versteht  nur left oder right und die Breite. Vertikal ist es auch so.

        Ist das ein Fehler, wenn ich den xml-Prolog notiert habe? Macht man das nicht?

        Fehler ist es keiner, aber IE bleibt damit halt nicht im Standard-Modus.

        Grüße
        saltun

  3. Firefox zeigt alles richtig an (oder jedenfalls wie ich mir das vorstelle ;-).
    IE verhunzt.

    Ja, Marco, der ist ja auch im Quirks-Modus. Der schaltet nur um, wenn sich die DOCTYPE-Angabe in der 1. Zeile befindet. (Im IE 5.0 bleibt es verhunzt.)

    Also wirst du ohne XML-Deklaration auskommen müssen, was ja kein Problem ist, wenn das Dokument UTF-8-codiert ist. Das allerdings solltest du mit content-type angeben.

    Aber was soll das:
    <style type="text/css">
    @import url(styling.css);
    </style>

    Warum nutzt du nicht das link-Element?

    Gunnar

    --
    „Solang wir noch tanzen können
    und richtig echte Tränen flennen,
    ist noch alles offen,
    ist noch alles drin.“
    (Gundermann)
    1. Ja, Marco, der ist ja auch im Quirks-Modus. Der schaltet nur um, wenn sich die DOCTYPE-Angabe in der 1. Zeile befindet. (Im IE 5.0 bleibt es verhunzt.)

      Ich habe eine Lösung gefunden ohne den Modus zu ändern (siehe Antwort weiter unten). Nicht unbedingt elegant, aber naja. Immerhin wird die Seite dann auch im IE5 richtig interpretiert.

      Also wirst du ohne XML-Deklaration auskommen müssen, was ja kein Problem ist, wenn das Dokument UTF-8-codiert ist. Das allerdings solltest du mit content-type angeben.

      Aber was soll das:
      <style type="text/css">
      @import url(styling.css);
      </style>

      Ich verzichte auf das Link Element, weil sonst der Netscape 4 anfängt, dass CSS zu interpretieren und das auf sehr mangelhafte Weise. Das import parameter kennt er nicht und ließt die Seite ohne CSS. So bleibt die Seite lesbar.

      1. Hallo,

        Ich verzichte auf das Link Element, weil sonst der Netscape 4 anfängt, dass CSS zu interpretieren

        nicht wenn du dem link-element ein media-attribut schenkst.

        http://w3development.de/css/hide_css_from_browsers/media/

        mfg NAG

        --
        signatur