Thomas: Div bricht in FF um

Hallo,

bei folgender Seite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"><head>
<style type="text/css" media="screen">
#container_left {
 width: 214px;
 float: left;
}
#block_red_01 {
 width: 214px;
 height: 130px;
 background-color: #FE0405;
}
#container_main {
 width: 760px;
 height: 380px;
 float: left;
 clear: right;
}
#content_01_large_main {
 width:750px;
 background-color:#ECECEC;
}
</style>
</head>
<body>
 <div id="container_left">
  <div id="block_red_01"><br /><br /><br /></div>
 </div>
 <div id="container_main">
  <div id="content_01_large_main">
   <table align="center" width="98%">
    <tbody>
     <tr>
      <td align="left">bla bla bla bla bla bla bla bla bla </td>
     </tr>
    </tbody>
   </table>
  </div>
 </div>
</body>
</html>

wird der div:
container_main
umgebrochen und "bla bla ..." steht unter dem roten div, aber bei IE funktioniert es richtig und man bekommt einen vertikalen Scrollbalken.

Was kann ich machen, damit es auch im FF funktioniert?

lg
Thomas

  1. noch mal zum mitschreiben - wie SOLL es deiner meinung nach aussehen?
    P.S:wenn IE etwas darstellt , dann ist es falsch , geh immer davon aus und das hilft dir in 90% der Fälle.
    MFG
    bleicher

    --
    __________________________-
    Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
    1. Hallo,

      noch mal zum mitschreiben - wie SOLL es deiner meinung nach aussehen?
      P.S:wenn IE etwas darstellt , dann ist es falsch , geh immer davon aus und das hilft dir in 90% der Fälle.

      ok, das ist schon klar, dass FF eher an W3C rankommt, aber ich will eben, dass das DIV nicht umgebrochen wird.
      Es soll im FF auch so funktionieren wie beim IE, dass ein Scrollbalken kommt.

      Ich habe daher auch extra ein:
      clear: right;
      bei #container_main
      reingegeben, aber dies funkt eben nur beim IE.

      lg
      Thomas

      1. Hi

        Nimm dir zu Herzen was Bleicher sagt. Entwickle auf FF und dann repariere, was IE nicht checkt. Alles andere bringt nix und wird ab IE7 in den meisten Fällen dann falsch dargestellt, weil sogar der Billie ein bisschen dazugelernt hat.

        Zu deinem Code. Der ist ziemlich chaotisch und nicht logisch. Das alles geht ganz einfach. Vergiss die Tabelle, die is für nix. Die 98% sowieso nicht. 98% von was???? Sonst haste überall fixe Breiten drin...

        Also Tabelle raus und du alles mit pixeln definierst gehts so viel einfacher. Container mit der Layoutbreite um alles rum und darin dann die einzelnen Elemente rein.

        #container {
         width: 760px;
        }

        #left {
         width: 214px;
         height: 130px;
         background: #fe0405;
         float: left;
        }

        #right {
         margin-left: 214px;
         background: #ececec;
        }

        p {
         padding: 0.4em;
        }

        </style>
        </head>

        <body>
        <div id="container">
         <div id="left">
          <br />m<br />m<br />m
         </div>
         <div id="right">
          <p>bla bla bla bla bla bla</p>
         </div>
        </div>

        Gruss
        Pierre

        1. Hallo,

          super, vielen Dank, so hat es funktioniert.

          Nimm dir zu Herzen was Bleicher sagt. Entwickle auf FF und dann repariere, was IE nicht checkt. Alles andere bringt nix und wird ab IE7 in den meisten Fällen dann falsch dargestellt, weil sogar der Billie ein bisschen dazugelernt hat.

          Ich entwickle schon seit 2 Jahren nur auf FF und muß es mir leider, den Kunden zu liebe, immer wieder auf IE ansehen und da funkt teilw. manches nicht.

          Jetzt hab ich eigentlich nur mehr 1 Problem:
          Ich will ein Bild immer rechts ganz unten als Hintergrundbild haben, also auch wenn ein Scrollbalken vorhanden ist, soll das Hintergrund ganz unten recht im Eck sein.

          Ich hätte es schon fast hingebracht:

          einen div über alles drüber mit folgender Klasse:
          div.bg {
           position: relative;
           background-image: url(/images/background.gif);
           background-repeat:no-repeat;
           background-position: bottom right;
           height: 100%
          }

          leider ist aber das Hintergrundbild hierbei maximal ganz unten wo dann zu scrollen anzufangen ist.

          Vielleicht da noch einen Tipp?

          lg
          Thomas

          1. Hallo,

            div.bg {
            position: relative;
            background-image: url(/images/background.gif);
            background-repeat:no-repeat;
            background-position: bottom right;
            height: 100%
            }

            leider ist aber das Hintergrundbild hierbei maximal ganz unten wo dann zu scrollen anzufangen ist.

            Vielleicht da noch einen Tipp?

            http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_attachment@title=background-Attachment:fixed.

            mfg. Daniel

            1. Hallo,

              http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_attachment@title=background-Attachment:fixed.

              Das bringt mir leider auch nichts.

              Vielleicht habe ich mich ja schlecht ausgedrückt, aber ich will, dass das Hintergrundbild immer in der unteren rechten Ecke ist, auch wenn 1 Meter nach unten gescrollt werden muß, dann soll es auch ganz unten sein, also muß man zuerst nach unten scrollen und dann erst sieht man das Hintergrundbild.

              Leider kann ich es nicht in den Body geben, da dort schon ein Hintergrundbild ist.

              lg
              Thomas

              1. super-global-alles-umschliessendes DIV mit iegenem bg?
                MFG
                bleicher

                --
                __________________________-
                Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
                1. Hallo,

                  super-global-alles-umschliessendes DIV mit iegenem bg?

                  Etwa so?:

                  <div>  
                   <html>  
                    <head>  
                     ...  
                    </head>  
                    <body>  
                     ...  
                    </body>  
                   </html>  
                  </div>
                  

                  Ich glaube nicht, dass die Browser da mitspielen.

                  @Thomas
                   Du kannst auch dem <html>-Element einen Hintergrund geben.

                  mfg. Daniel

                  1. Hallo,

                    super-global-alles-umschliessendes DIV mit iegenem bg?

                    Etwa so?:

                    also SO gloabl muss es nciht sein ;:)
                    <html>[...]<body><div>[...]</div></body></html>
                    habe ich gemeinjt :)
                    MFG
                    bleicher

                    --
                    __________________________-
                    Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
              2. Hallo,

                Leider kann ich es nicht in den Body geben, da dort schon ein Hintergrundbild ist.

                Dann gib's halt dem übergeordneten HTML-Element.

                Ciao