Michael: Floating Problem

Hallo zusammen.

Bei meiner Webseite befindet sich links die Navigation und rechts Inhalt.

Ich verwende Div und erledige die Formatierung ausschliesslich in CSS.

Im Firefox und Safari sieht die Seite korrekt nach meinen Vorstellungen aus.

Im Internet Explorer rutscht der Inhalt (rechts von der Navigation) nach unten, d.h. der Inhalt beginnt nacht der Navigation.

Wenn ich die width des Div "Site" um 5 Pixel vergrössere, kommt der Inhalt wieder neben die Navigation.

Wisst Ihr wieso der IE eine grössere Breite benötigt?
Ich möchte nun eigentlich nicht die Breite um 5 Pixel vergrössern, da dann andere Dinge nicht mehr schön übereinstimmen. Gibt es da andere Lösungen?

Vielen Dank für Eure Hilfe.

Bem: Div "Site" ist das oberste Div in meinem Div-Layer.

  1. Wisst Ihr wieso der IE eine grössere Breite benötigt?
    Ich möchte nun eigentlich nicht die Breite um 5 Pixel vergrössern, da dann andere Dinge nicht mehr schön übereinstimmen. Gibt es da andere Lösungen?

    Boxmodell Bug?

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    1. Hier findet ihr ein Gerüst meiner Seite.

      Kann mir jemand helfen, damit der Inhalt neben den Buttons erscheint?
      Im Firefox funktioniert es (wie oben bereits geschrieben)!

      http://home.arcor.de/michael_boyd/

      1. Habe oben ausversehen mit Michael Boyd gepostet, da könnte man meinen das sei jemand anderes gewesen.

        Es ist leider ziemlich dringend...ich sollte das Problem so schnell wie möglich lösen.

        Bin also für jede Hilfe dankbar.

        LINK (nochmals):

        http://home.arcor.de/michael_boyd/

        1. Hallo,

          wenn du für den IE 6 probeweise auf "<?xml version="1.0" encoding="ISO-8859-1"?>"
          verzichtest mag sich einiges besser verhalten.

          Ansonsten wäre es vorteilhaft wenn du das Problem etwas besser isolieren
          könntest, deine Aussage "width des Div "Site" um 5 Pixel vergrössere," kann ich
          als möglichen WA mit deinen Files gar nicht nachvollziehen.

          Hast du, wenn es bei dir mit 5 Pixel mehr klappt, schon geschaut
          wo diese 5 Pixel benötigt werden, einfach fürs floaten oder werden
          Rahmen ähnlich wie beim boxbug fehlerhaft berechnet?

          Du kannst aber auch gerne mal mit ul {float:left} meinen Lieblingshack
          für Listen Menu und Internet Explorer versuchen.

          Grüsse

          Cyx23

          1. Hallo,

            wenn du für den IE 6 probeweise auf "<?xml version="1.0" encoding="ISO-8859-1"?>"
            verzichtest mag sich einiges besser verhalten.

            Ansonsten wäre es vorteilhaft wenn du das Problem etwas besser isolieren
            könntest, deine Aussage "width des Div "Site" um 5 Pixel vergrössere," kann ich
            als möglichen WA mit deinen Files gar nicht nachvollziehen.

            Hast du, wenn es bei dir mit 5 Pixel mehr klappt, schon geschaut
            wo diese 5 Pixel benötigt werden, einfach fürs floaten oder werden
            Rahmen ähnlich wie beim boxbug fehlerhaft berechnet?

            Du kannst aber auch gerne mal mit ul {float:left} meinen Lieblingshack
            für Listen Menu und Internet Explorer versuchen.

            Grüsse

            Cyx23

            Hallo Cyx23

            Danke für Deine Tipps.
            Dein Hack scheint beim mir nicht das Problem zu lösen.

            Damit Ihr mein Problem bei Euch lokal (falls jemand lust hat) testen könnt, poste ich hier noch den Inhalt meines CSS-Files.

            FILE: formate.css

            body {
             background-position: center;
             font-family: sans-serif;
             font-size: 9pt;
             margin: 0em
             padding: 1em;
            }

            /* class definitions --------------------------------------------------------*/
            .border_ru {
             background-image: url(Images/border_main_ru.jpg);
             background-position: top right;
             background-repeat: no-repeat;
             margin: 0px 0em 0em 0px;
             padding: 0px 0em 0em 0em;
            }

            .border_lu {
             background-image: url(Images/border_main_lu.jpg);
             background-position: top left;
             background-repeat: no-repeat;
             margin: 0px 0em 0em 0px;
             padding: 5px 0em 0em 0em;
            }

            .border_ll {
             background-image: url(Images/border_main_ll.jpg);
             background-repeat: no-repeat;
             background-position: bottom left;
             margin: 0px 0em 0em 0px;
             padding: 0px 0em 0em 0em;
            }

            .border_rl {
             background-image: url(Images/border_main_rl.jpg);
             background-repeat: no-repeat;
             background-position: bottom right;
             margin: 0px 0em 0em 0px;
             padding: 0px 0em 0em 0em;
            }
            /* END OF class definitions -------------------------------------------------*/

            /* div definitions ----------------------------------------------------------*/
            div#Banner {
             background-color: white;
             margin: 0em 1em 0.2em 180px;
             padding: 3px 0em 0em 0em;
            }

            div#Main {
             margin: 0px 1em 0em 180px;
             padding: 0px 0em 0em 0em;
            }

            div#Maininner {
             margin: 0em 0em 0em 0em;
             padding: 1em 1em 1em 1em;
            }

            div#Maininner td#dot {
             border-right-style: dotted;
             border-right-width: 1px;
            }

            div#Maininner td#sep {
             border-color: grey;
             border-bottom-style: solid;
             border-bottom-width: 1px;
            }

            div#Maininner td#row {
             vertical-align: top;
             width: 50%
            }

            div#Maininner input {
             background-color: #D3E4FF;
             border-color: #000000;
             border-style: solid;
             border-width: 1px;
             padding: 0px 0px 0px 3px;
            }

            div#Maininner input#button {
             background-color: #D3E4FF;
             border-style: solid;
             border-width: 0px;
             padding: 0px 0px 0px 0px;
            }

            div#Maininner textarea {
             background-color: #D3E4FF;
             border-color: #000000;
             border-style: solid;
             border-width: 1px
            }

            div#Maininner select {
             background-color: #D3E4FF;
             border-color: #000000;
             border-style: solid;
             border-width: 1px;
            }

            div#Site {
             background-color: white;
             background-image: url(Images/white_border.gif);
             background-repeat: repeat-y;
             margin: 0 auto;
             padding: 0em;
             width: 800px;
            }
            /* END OF div definitions ----------------------------------------------------*/

            /* list definitions ----------------------------------------------------------*/
            ul#Navigation {
             display: block;
             float: left;
             font-weight: bold;
             margin: 5px 0px 0px 5px;
             padding: 0em 0em 0em .5em;
             width: 160px;
            }

            ul#Simple {
             display: block;
             margin: 0em 0em 0em 0px;
             padding: 0em 1em 0em 0em;
            }

            ul#Simple li {
             list-style: none;
             margin: 0em 1em 1em 1em;
             padding: 0em 0em 0em 0em;
            }

            ul#Bullet {
             display: block;
             margin: 0em 0em 0em 2.2em;
             padding: 0em 0em 0em 0em;
            }

            ul#Bullet li {
             list-style: circle;
             margin: 0em 0em .5em 0em;
             padding: 0em 0em 0em 0.0em;
            }

            ul#Navigation li {
             list-style: none;
             margin: 0em 0em 0em 1em;
             padding: 0em 0em 0em 0em;
            }

            ul#Navigation a {
             text-decoration: none;
            }

            ul#Navigation a:link {
             color: white;
            }

            ul#Navigation a:visited {
             color: white;
            }

            ul#Navigation a:hover {
             color: white;
            }

            ul#Navigation a:active {
             color: white;
            }
            /* END OF list definitions ---------------------------------------------------*/

            /* heading definitions -------------------------------------------------------*/
            h1 {
             font-size: 16pt;
             margin: 0 0 0.7em;
             text-align: left;
            }

            h3 {
             font-family: sans-serif;
             font-style: normal;
             font-size: 7pt;
             font-weight: normal;
            }

            h4 {
             color: #012699;
             font-family: sans-serif;
             font-style: normal;
             font-size: 10pt;
             font-weight: bold;
             margin: 0 0 0.3em;
            }
            /* END OF heading definitions ------------------------------------------------*/

            1. Hallo,

              Dein Hack scheint beim mir nicht das Problem zu lösen.

              bei mir klappts offenbar mit 6, 55 und 50.

              Grüsse

              Cyx23

  2. Das dürfte der floating/boxmodel-bug vom IE sein.

    Ich nehem an deine Seite ist HTML4.01 transitional.

    Wenn Du sie in XHTML strict machst (HTML4.01 strict geht glaube ich auch, Hauptsache strict) rendert auch der IE sowas korrekt ohne diesen Darstellungsbug. Ansonsten gibt es im Netzt ein paar Workarrounds dafür. Finde ich persönlich sehr unschön.

    Ich hoffe das hilft irgendwie

    1. Das dürfte der floating/boxmodel-bug vom IE sein.

      Ich nehem an deine Seite ist HTML4.01 transitional.

      Wenn Du sie in XHTML strict machst (HTML4.01 strict geht glaube ich auch, Hauptsache strict) rendert auch der IE sowas korrekt ohne diesen Darstellungsbug. Ansonsten gibt es im Netzt ein paar Workarrounds dafür. Finde ich persönlich sehr unschön.

      Ich hoffe das hilft irgendwie

      Hi Du kannst ein Gerüst meiner Seite anschauen
      unter http://home.arcor.de/Michael_Boyd/

      Meine Seite ist in XHTML strict geschrieben.
      Jedoch macht der IE die Fehler trotzdem.

      1. Meine Seite ist in XHTML strict geschrieben.
        Jedoch macht der IE die Fehler trotzdem.

        durch diese Zeile: <?xml version="1.0" encoding="ISO-8859-1"?>
        wird der IE in den Quirksmodus geschickt. In dem Falle greift der Boxmodell Bug (du hast sicherlich schon recherchiert, was das bedeutet)

        Struppi.

        --
        Javascript ist toll (Perl auch!)
        1. Hallo Struppi,

          durch diese Zeile: <?xml version="1.0" encoding="ISO-8859-1"?>

          Der BoxBug ists aber wohl nicht sondern ein ähnlicher Effekt.

          Ausserdem vermute ich dass er sowieso gerade etwas am Beispiel geändert
          hat, so CSS im Head, vielleicht damit es etwas übersichtlicher wird.

          Trotzdem kann ich nicht mehr nachvollziehen warum sein Workaround mit
          den 5 zusätzlichen Pixeln bei den von mir runtergeladenen Dateien
          nicht funktioniert hat, dafür aber die floatende Liste.

          Vielleicht kann Michael das Problem ja noch etwas isolieren
          (wenn es denn überhaupt sinnvoll ist so "pixelgenau" vorzugehen),
          abgesehen von irgendwelchen IE-Bugs mit Boder oder float
          mögen die relativen Angaben bei margin, die fehlerhafte Vererbung
          des IE (bis zu Schriftgrößen) beteiligt sein.

          Grüsse

          Cyx23

          1. durch diese Zeile: <?xml version="1.0" encoding="ISO-8859-1"?>

            Der BoxBug ists aber wohl nicht sondern ein ähnlicher Effekt.

            hmm, ich hab mir es tatsächlich nicht genau angeschaut (hab momentan kein Zeit für sowas). Der IE stellt es auch falsch dar, ohne diese Zeile?

            Struppi.

            --
            Javascript ist toll (Perl auch!)
    2. Hallo

      Das dürfte der floating/boxmodel-bug vom IE sein.

      Ich nehem an deine Seite ist HTML4.01 transitional.

      Wenn Du sie in XHTML strict machst (HTML4.01 strict geht glaube ich auch, Hauptsache strict) rendert auch der IE sowas korrekt ohne diesen Darstellungsbug. Ansonsten gibt es im Netzt ein paar Workarrounds dafür. Finde ich persönlich sehr unschön.

      Ich hoffe das hilft irgendwie

      Das wird es nicht, da es falsch ist. Den MSIE interessiert nicht, ob transitional oder strict verwendet wird. Ihn interessiert, worauf du wahrscheinlich hinaus willst, ob er in den 'standard comliants mode' geschickt wurde.

      Dies erreicht man durch Angabe der URL der betreffenden DTD. Und zwar auch(!) bei den transitional-Varianten der jeweilige (X)HTML-Version.

      siehe: SELFHTML: Dokumenttyp-Deklaration

      Tschö, Auge

      --
      Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
      (Victor Hugo)
      Veranstaltungsdatenbank Vdb 0.1