<div> + IE & Co

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    <div> + IE & Co

    Salut zusammen

    also erstmal sorry wenn ich etwas schreibe was allen alten Hasen schon bekannt sein könnte. Aber ich war einfach froh als ich gestern ein Prob mit div's und dem IE lösen konnte.
    Es geht um folgendes:

    Ich habe 3 div-Container auf meiner Seite (links, rechts und content). Ich wollte ein Layout mittels CSS machen, das für alle Browser und alle Auflösungen korrekt sein sollte d.h. mit relativen Angaben der Grösse im CSS.

    Nun stellten alle Browser die Seite korrekt dar, bis auf den IE. Immer war die Grösse des content-divs zu klein (Mozilla&Co hatten die korrekte Grösse).

    Ich vermute, dass der IE bei Grössen in Prozentangaben, diese aus dem noch verfügbaren Platz berechnet und alle anderen Browser diesen aus 100 % berechnen. Will heissen ein Layout mit drei Divs zu jeweils 33% ergibt in allen Browsern ausser IE eine korrekte Aufteilung der Seite in 3 gleichgrosse Container. Der IE nimmt für die Grösse des 2.divs 0.3*66%.

    Somit musste ich nur wegen dem IE ein pixelgenaues Layout machen und dies für unterschiedliche Auflösungen anpassen.

    Gestern habe ich dann geschnallt, dass ich einfach, wenn der User mit einem IE kommt, das Div entsprechend anpassen muss.
    Ich habe das dann so gemacht:
    PHP-Code:
    <div class="content" style="width:85%">Inhalt</div> 
    Ist das so, dass der IE die relativen Grössen in Div's anderst berechnet als all die anderen Browser ??

    Gruss

    tobi
    Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

    [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
    Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)
    Stichworte: -
  • #2
    Im Zusammenhang mit border und/oder padding is das so.

    Hier ist eine Erklärung und ein Lösungsweg des Problems zu finden.

    Kommentar

    • #3
      Salut rythms

      danke für den Link. Habe mal reingeschaut. Aber irgendwie besteht das Prob auch ohne padding oder/und border

      PHP-Code:
      css file

      #links,#rechts{
      width:20%;
      background-color:red;
      }

      #links{
      float:left;
      }

      #rechts{
      float:right;
      }

      #content{
      width:50%;
      background-color:blue;
      } 
      PHP-Code:
      html Code

      <html>
      <      head>
      <      title>Halli hallo Welt</title>
      <      link  rel=stylesheet  type="text/css" href="mainth.css">
      </      head>
      <      body>
      <      div id="links">some content</div><div id="rechts">the real content</div><div id="content">rest of content</div>
      </      body>
      </      html> 
      Irgendwie interpretiert der IE die Grösse des contents immer noch falsch. Er nimmt 50% der verbleibenden Grösse und nicht 50% des gesamten Bildschirms.

      Gruss

      tobi
      Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

      [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
      Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

      Kommentar

      • #4
        warum gibst du #content überhaupt eine feste breite - warum nicht einfach ein entsprechendes seitliches margin ?
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar

        • #5
          warum gibst du #content überhaupt eine feste breite - warum nicht einfach ein entsprechendes seitliches margin ?
          Werde ich mal so probieren.
          Danke

          tobi
          Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

          [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
          Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

          Kommentar

          • #6
            schöne beispiel findest du hier:
            http://www.glish.com/css/
            Kissolino.com

            Kommentar

            • #7
              Salut zusammen

              ich habe gestern mal ein bisschen rumprobiert. Für mich die beste Lösung ist es jedoch, für den IE einfach die Grösse anzupassen (braucht am wenigsten Umbauarbeiten )

              Eigentlich dachte ich immer, dass der IE sich an den w3-Standard halten würde. Na ja wieder was gelernt...
              Danke

              tobi
              Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

              [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
              Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

              Kommentar

              • #8
                Salut zusammen

                ich habe ein weiteres Problem mit IE und der Definition von Grössen bei div.
                Im CSS steht folgendes:
                Code:
                #content_quote {
width:300px;
height:300px;
padding:60px;
background-image:../test.jpg;
margin-top:18px;
text-align:left;
}
                Alle Browser (bis auf den IE) zeigen die Grösse des Divs korrekt mit 300x300px an --> also immer fixe Grösse (unabhängig von der Textmenge)
                Der IE passt die Grösse knallhart der Textmenge an.
                Wie kann das sein, wenn doch das Div ne fixe Grösse hat ?

                Danke für den Beistand

                tobi

                p.s. bei backround-image habe ich einen absoluten Pfad, welchen ich aber hier entfernt habe, da sonst automatisch ein Link erstellt wird.
                Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

                [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
                Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

                Kommentar

                • #9
                  Original geschrieben von jahlives
                  Der IE passt die Grösse knallhart der Textmenge an.
                  Wie kann das sein, wenn doch das Div ne fixe Grösse hat ?
                  weil der IE width und height eher wie min-width und min-height interpretiert - "passt's nich rein, mach ich's halt größer ..."

                  abhilfe könnte ggf. ein geeigneter wert für overflow schaffen.
                  I don't believe in rebirth. Actually, I never did in my whole lives.

                  Kommentar

                  • #10
                    @wahsaga
                    ich wage es mich kaum zu sagen aber ich habe es mit dem Lineal ausgemessen und sah, dass IE die korrekte Breite hat
                    Der Explorer hat dann die Höhe anpassen müssen.

                    Was jetzt aber immer wunderlicher wird, ist dass Mozilla und Firefox diesen Effekt nicht haben. Die nehmen einfach von Anfang an eine zu grosse Grösse. Selbst wenn ich nur ein Zeichen ausgebe nehmen die einen Wert jenseits der CSS Def als Grösse.


                    Gruss

                    tobi
                    Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

                    [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
                    Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

                    Kommentar

                    • #11
                      Original geschrieben von jahlives
                      [...] IE die korrekte Breite [...]
                      [...] Mozilla und Firefox [...] nehmen einfach von Anfang an eine zu grosse Grösse.
                      dass das padding zur "breite" dazugerechnet wird, hast du aber diesmal berücksichtigt ...?

                      oder hast du das box model immer noch nicht verstanden? *g*
                      I don't believe in rebirth. Actually, I never did in my whole lives.

                      Kommentar

                      • #12
                        Tja dann werde ich mich wohl intensiver ins Thema einlesen müssen.

                        Thx @ wahsaga

                        Gruss

                        tobi
                        Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

                        [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
                        Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

                        Kommentar

                        Vorherige template Weiter
                        Lädt...
                        X