Taney: Layoutproblem zwischen IE und FF

Hallo nochmal, habe jetzt gestern herumprobiert und verzichte mal auf das floaten, bzw. das Problem von oben.

Habe aber nur noch ein kleines Problem zwischen Firefox und IE.

Der Code sieht so aus:

<div style="margin:0px auto; padding:0px; width:660px; ">
 <div style="padding:10px;">
  Überschrift
 </div>

<div style="float:left; margin-left:0px; width:140px;  background-image:url(../design/profil_menue.gif); background-repeat:no-repeat; padding-left:10px; overflow:visible;">
 Menü Links
 </div>

<div style="margin-left:150px; padding:0px; margin:0px; height:26px;">
 Menü Rechts
 </div>

<div style="margin-left:150px; padding:0px; margin-top:-4px; min-height:320px; height:320px; background-color: #ffffff; background-image:url(../design/white.gif); overflow:visible;" >
 Inhalt

</div>
 <!-- Right End  -->
</div>
<!-- Hauptdiv End  -->

<br style="clear: both;">
Die Inhalte dieses Profiles wurden ausschließlich durch deren Inhaber erstellt.

Sobald ich nun im letzten DIV das height:320px; rausnehme, sieht es im IE so aus:

http://yamuk.com/beispiel10.jpg
Die Fläche ist nicht weiß mit min-height:320px, sobald der Inhalt nicht so hoch ist.

Sobald ich height:320px drin lasse im letzten DIV und der Inhalt lang ist, positioniert Firefox den letzten Text einfach ab 320px und schiebt das DIV drüber. Das sieht dann so aus:
http://yamuk.com/beispiel9.jpg

Hab da schon alles mögliche versucht mit overflow, clear:both, style, usw.
Woran könnte das liegen?

Grüße

  1. hi,

    Sobald ich nun im letzten DIV das height:320px; rausnehme, sieht es im IE so aus: [...]>
    Die Fläche ist nicht weiß mit min-height:320px, sobald der Inhalt nicht so hoch ist.

    IE kleinergleich Version 6 versteht kein min-height.

    Sobald ich height:320px drin lasse im letzten DIV und der Inhalt lang ist, positioniert Firefox den letzten Text einfach ab 320px und schiebt das DIV drüber.

    Natürlich, der FF hält sich an height.

    Woran könnte das liegen?

    Works as designed.

    Wenn du lediglich eine Mindesthöhe angeben willst, sorge dafür, dass der IE 7 und alle anderen Browser eine min-height vorgesetzt bekommen, und kein height (bzw. height:auto).

    Sorge weiterhin dafür, dass du nur den IE < 7 height vorsetzt, welches diese wie min-height interpretieren.

    Conditional Comments bieten sich an.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hi, danke für die schnelle Antwort.

      Natürlich, der FF hält sich an height.

      Ich habe gedacht, sobald ich height angebe, dass er dann im FF mit overflow:visible die Höhe, falls länger, anpasst.

      Woran könnte das liegen?

      Conditional Comments bieten sich an.

      Danke für den Tipp. Hört sich interessant an. Werde mich da gleich mal einarbeiten.

      Grüße

      1. hi,

        Ich habe gedacht, sobald ich height angebe, dass er dann im FF mit overflow:visible die Höhe, falls länger, anpasst.

        Nein, deshalb heisst es ja overflow:visible.

        Das, was du dir da vorstellst, müsste overflow:adjust-height o.ä. heissen.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hi,

          Das, was du dir da vorstellst, müsste overflow:adjust-height o.ä. heissen.

          achso.

          arbeite mich gerade in Conditional Comments ein.
          Eine Frage dazu, gibt es da so etwas ähnliches wie "else"?

          Sprich,

          <!--[if lt IE 7]>
           <style type="text/css">
            #contentMain {
             margin-left:150px;
             padding:0px;
             margin-top:-4px;
             height:320px;
             background-color: #ffffff;
            }
           </style>
          <![endif]-->

          else min-height

          1. hi,

            arbeite mich gerade in Conditional Comments ein.
            Eine Frage dazu, gibt es da so etwas ähnliches wie "else"?

            Du brauchst kein else.

            height-Deklaration für verständige Browser davor setzen, und nur für den IE hinterher überschreiben.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Hi,

              Du brauchst kein else.

              height-Deklaration für verständige Browser davor setzen, und nur für den IE hinterher überschreiben.

              Jep, habe es jetzt so gemacht:

              <style type="text/css">
              #contentMain {
               margin-left:150px;
               padding:0px;
               margin-top:-4px;
               min-height:320px;
               background-color: #ffffff;
                }
              </style>

              <!--[if lt IE 7]>
               <style type="text/css">
                #contentMain {
                 height:320px;
                }
               </style>
              <![endif]-->

              Und es tut ;)

              Grüße

            2. Was ich gerade noch feststelle, dass position:fixed genauso in IE nicht geht. Eine alternative wird es wohl auch nicht geben ne?

              Grüße

              1. hi,

                Was ich gerade noch feststelle, dass position:fixed genauso in IE nicht geht. Eine alternative wird es wohl auch nicht geben ne?

                Probier's doch bitte das nächste Mal mit Suchen, statt Fragen.

                http://de.selfhtml.org/css/layouts/fixbereiche.htm#fixiert_ie

                gruß,
                wahsaga

                --
                /voodoo.css:
                #GeorgeWBush { position:absolute; bottom:-6ft; }
          2. Hello out there!

            arbeite mich gerade in Conditional Comments ein.
            Eine Frage dazu, gibt es da so etwas ähnliches wie "else"?

            Ja.

            See ya up the road,
            Gunnar

            --
            „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)