float Problem bei NICHT IE Browsern und 3 weitere Fragen

[Twilo]

Hallo,

1.
ich habe bei folgender Testseite ein Float Problem
es soll nachher so aussehen, wie es im Internet Explorer 6 aussieht

mein problem ist, dass 2mal float:left verwendet wurde und diese beide an unterschiedlichen Stellen aufgehoben werden müssen

Mozilla 1.2 soll es auch so darstellen wie ich es wünsche

kann mir jemand den entscheidenden Tipp geben, wie ich das Problem lösen kann?

2.
die Überschrift "xxx: Hugo Behnke" sieht optisch tiefer aus, als links das Menü, wenn ich mir um beide Rahmen packen lasse, fangen die Rahmen auf der selben Höhe an. Woher kommt dieser kleine Unterschied?

3.
Im Internet Explorer hab ich z.b. das Problem, dass die Fußzeile über 2 Zeilen geht, woran könnte das liegen?

4.
der margin Abstand wird mit 165px angegeben, warum haben Opera udn Firefox dann einen größeren Abstand, als der IE
im Firefox sind es ca. 180px
woher kommen diese 20px?

ich hoffe, ihr könnt mir diese Fragen beantworten :-)

mfg
Twilo

[Twilo]

Hallo,

[...]

war etwas unklar an meiner Beschreibung, dass jetzt keine Antworten kommen?

wenn es Unklarheiten gibt, dann versuche ich die natürlich aus den Weg zu schaffen

mfg
Twilo

[Ingo Turski]

Hi,

war etwas unklar an meiner Beschreibung, dass jetzt keine Antworten kommen?

ja. 1. verstehe ich nicht und 3. kann ich nicht nachvollziehen. 4. verstünde ich vielleicht, wenn ich 1. verstehen würde. ;-)
3. liegt daran, daß die Oberkannte der Elemente gleich ausgerichtet ist, aber nicht die Grundlinie.

freundliche Grüße
Ingo

[Twilo]

Hallo,

war etwas unklar an meiner Beschreibung, dass jetzt keine Antworten kommen?
ja. 1. verstehe ich nicht und 3. kann ich nicht nachvollziehen. 4. verstünde ich vielleicht, wenn ich 1. verstehen würde. ;-)

3. liegt daran, daß die Oberkannte der Elemente gleich ausgerichtet ist, aber nicht die Grundlinie.

mein Problem ist, dass ich dort 2* float:left verwende und beide durch clear:left einzeln aufheben müßte, nur wenn ich einmal clear:left verwende, werden gleich beide aufgehoben

wenn es soetwas geben würde wie... cleare nur folgendes float, dan hät ich keine Probleme ;-)

wenn du dir die Testseite in Opera, Firefox, etc. anschaust, sollte dir das Problem auffallen

das der IE sich falsch verhält, möchte ich nicht ausschliessen ;-)

mfg
Twilo

[Ingo Turski]

Hi,

mein Problem ist, dass ich dort 2* float:left verwende und beide durch clear:left einzeln aufheben müßte, nur wenn ich einmal clear:left verwende, werden gleich beide aufgehoben

gut. das ist in der Tat ein Problem. ;-)

das der IE sich falsch verhält, möchte ich nicht ausschliessen ;-)

gut so. Übrigens hatte auch Mozilla 1.7 noch dieses falsche Verhalten. Erst Firefox 1.0 hat dazugelernt und clear - zumindest für diesen Fall - standardkonform umgesetzt.

Deine Seite dürfte dem 2. Beispiel meiner Seite über die unterschiedliche Interpretation von 'clear' entsprechen.

freundliche Grüße
Ingo

[Twilo]

Hallo,

mein Problem ist, dass ich dort 2* float:left verwende und beide durch clear:left einzeln aufheben müßte, nur wenn ich einmal clear:left verwende, werden gleich beide aufgehoben
gut. das ist in der Tat ein Problem. ;-)

das der IE sich falsch verhält, möchte ich nicht ausschliessen ;-)
gut so. Übrigens hatte auch Mozilla 1.7 noch dieses falsche Verhalten. Erst Firefox 1.0 hat dazugelernt und clear - zumindest für diesen Fall - standardkonform umgesetzt.

Deine Seite dürfte dem 2. Beispiel meiner Seite über die unterschiedliche Interpretation von 'clear' entsprechen.

nur wie kann ich das Problem geschickt lösen? :-(

wie kann ich das 2. Float "clearen" ohne das 1. zu "clearen"

mfg
Twilo

[Ingo Turski]

Hi,

nur wie kann ich das Problem geschickt lösen? :-(

Du könntest ein Element absolut positionieren statt es zu floaten.

wie kann ich das 2. Float "clearen" ohne das 1. zu "clearen"

gar nicht - das ist nicht vorgesehen. Du könntest es natürlich so machen wie in meinem dritten Beispiel, aber auch diesen Bug könnte Firefox irgendwann fixen.

freundliche Grüße
Ingo

[Twilo]

Hallo,

nur wie kann ich das Problem geschickt lösen? :-(
Du könntest ein Element absolut positionieren statt es zu floaten.

wqenn ich wüßte, wie lang der Inhalt ist, wäre das kein Problem.
Wenn ich ein Positioniere, müßte ich ja auch die Höhe berechnen, damit der Resr auch noch hinhaut

wie kann ich das 2. Float "clearen" ohne das 1. zu "clearen"
gar nicht - das ist nicht vorgesehen. Du könntest es natürlich so machen wie in meinem dritten Beispiel, aber auch diesen Bug könnte Firefox irgendwann fixen.

Das Problem ist ja, dass du dort float: right in verbindung mit einer Breitenangabe verwendest
meine äußere Box hat eine px-Breite und das Menü eine em-Breite, ich müßte also für den content-Bereich irgeneien Angabe machen.. nur welche? eine Angabe wie "Rest" ist mir noch nicht untergekommen ;-)
wenn ich das Menü in px angebe, bekomme ich Probleme, wenn man im IE die Schriftgröse auf "sehr gross" einstellt.

mfg
Twilo

[Ingo Turski]

Hi,

wqenn ich wüßte, wie lang der Inhalt ist, wäre das kein Problem.
Wenn ich ein Positioniere, müßte ich ja auch die Höhe berechnen, damit der Resr auch noch hinhaut

Du könntest das Menü positionieren und für ausreichend Inhalt sorgen.

meine äußere Box hat eine px-Breite und das Menü eine em-Breite, ich müßte also für den content-Bereich irgeneien Angabe machen.. nur welche? eine Angabe wie "Rest" ist mir noch nicht untergekommen ;-)

probier's mal ohne Breitenangabe.

freundliche Grüße
Ingo

[Twilo]

Hallo,

wqenn ich wüßte, wie lang der Inhalt ist, wäre das kein Problem.
Wenn ich ein Positioniere, müßte ich ja auch die Höhe berechnen, damit der Resr auch noch hinhaut
Du könntest das Menü positionieren und für ausreichend Inhalt sorgen.

das kann ich leider nicht beeinflussen, da der Inhalt von Usern eingegeben wird [ich kann mir ja kein Text dazudichten :-)]
Die Seite wird dann on-the-fly generiert und eine Cache-Datei abgelegt

meine äußere Box hat eine px-Breite und das Menü eine em-Breite, ich müßte also für den content-Bereich irgeneien Angabe machen.. nur welche? eine Angabe wie "Rest" ist mir noch nicht untergekommen ;-)
probier's mal ohne Breitenangabe.

dann hab ich links das Menü, dazwischen gar nix und rechts den Content
das sieht etwas daneben aus ;)

mfg
Twilo

[Ingo Turski]

Hi,

tja, wenn das alles nicht geht, mußt Du wohl auf ein float verzichten - oder das Layout auf float:right umstricken müssen.

freundliche Grüße
Ingo

[Detlef G.]

Hallo Twilo

wie kann ich das 2. Float "clearen" ohne das 1. zu "clearen"

Claeren zwar nicht, aber du musst es nicht claeren, wenn du dafür sorgst, dass
das Element neben dem Bild immer mindestens so hoch, wie das Bild ist.

z.B. so:

  
#textBereich {  
  margin-left: 163px;  
  min-height: 205px;  
}  
* html #textBereich {  
  height: 205px;  
}  

Auf Wiederlesen
Detlef

[Twilo]

Hallo,

wie kann ich das 2. Float "clearen" ohne das 1. zu "clearen"

Claeren zwar nicht, aber du musst es nicht claeren, wenn du dafür sorgst, dass
das Element neben dem Bild immer mindestens so hoch, wie das Bild ist.

z.B. so:

#textBereich {
  margin-left: 163px;
  min-height: 205px;
}

• html #textBereich {
    height: 205px;
  }

  
an diese Variante hab ich noch gar nicht gedacht  
Das Problem, was ich dann wieder habe, es kann zwischen verschiednen Bildern ausgewählt werden, die Bilder haben alle nicht die selben Maße  
  
mfg  
Twilo

[Detlef G.]

Hallo Twilo,

an diese Variante hab ich noch gar nicht gedacht
Das Problem, was ich dann wieder habe, es kann zwischen verschiednen Bildern ausgewählt werden, die Bilder haben alle nicht die selben Maße

Dann dürftest du damit aber auch Probleme bekommen.

  
#bild {  
  float: left;  
  width: 160px;  
}  
#textBereich {  
  margin-left: 163px  
}

Was mir dann noch einfällt, du könntest das Bild und den Test daneben
gemeinsam in ein zusätzliches Element packen und diesem float und 100%
Breite geben.

  
<div id="bildContainer3">  
  <div id="floater">  
    <div id="bild"><img src="../_grafiken/motiv.gif" alt="" /></div>  
    <div id="textBereich">  
      <p>Spruch</p>  
      <h2>Hugo Behnke</h2>  
      <h3>&#8224; 01.02.2004</h3>  
      <p class="angehoerige">In ewiger Trauer<br />  
        <strong>Person1<br />  
        Person2</strong></p>  
    </div>  
  </div>  
  <p>Das soll unten über die ganze Breite gehen</p>  
</div>  

  
#floater {  
  float:left;  
  width:100%;  
}  

Auf Wiederlesen
Detlef

[Twilo]

Hallo,

an diese Variante hab ich noch gar nicht gedacht
Das Problem, was ich dann wieder habe, es kann zwischen verschiednen Bildern ausgewählt werden, die Bilder haben alle nicht die selben Maße

Dann dürftest du damit aber auch Probleme bekommen.

#bild {
  float: left;
  width: 160px;
}
#textBereich {
  margin-left: 163px
}

  
wieso sollte ich damit Probleme bekommen?  
  
  

> Was mir dann noch einfällt, du könntest das Bild und den Test daneben  
> gemeinsam in ein zusätzliches Element packen und diesem float und 100%  
> Breite geben.  
  

> ~~~html
  

> <div id="bildContainer3">  
>   <div id="floater">  
>     <div id="bild"><img src="../_grafiken/motiv.gif" alt="" /></div>  
>     <div id="textBereich">  
>       <p>Spruch</p>  
>       <h2>Hugo Behnke</h2>  
>       <h3>&#8224; 01.02.2004</h3>  
>       <p class="angehoerige">In ewiger Trauer<br />  
>         <strong>Person1<br />  
>         Person2</strong></p>  
>     </div>  
>   </div>  
>   <p>Das soll unten über die ganze Breite gehen</p>  
> </div>  
> 

#floater {
  float:left;
  width:100%;
}

  
dann ist aber das Bild nicht links sondern über den Text :-)  
  
also Spruch, Hugo Behnke, † 01.02.2004, ... soll ja rechts neben das Bild sein  
  
mfg  
Twilo

[Detlef G.]

Hallo Twilo,

wieso sollte ich damit Probleme bekommen?

Du schriebst, es könnten verschiedne Bilder mit unterschiedlichen Maßen
ausgewählt werden. Die im CSS angegebene Breite für #bild und Margin für
#textBereich passen aber nur für Bilder dieser Breite.

dann ist aber das Bild nicht links sondern über den Text :-)

In welchen Browsern ist hierbei das Bild über dem Text. In den Browsern,
mit denen ich mal schnell draufgeschaut habe (Firefox 1.0.4, Opera 7.23,
Opera 8.0 und IE 6.0), bei mir  nicht.

Auf Wiederlesen
Detlef

[Twilo]

Hallo,

wieso sollte ich damit Probleme bekommen?

Du schriebst, es könnten verschiedne Bilder mit unterschiedlichen Maßen
ausgewählt werden. Die im CSS angegebene Breite für #bild und Margin für
#textBereich passen aber nur für Bilder dieser Breite.

die Breite für ein Bild ist auf 160px begrenzt, die Höhe kann Variable sein
dan passt das wieder, wenn die Breite variable wäre, hättest du Recht, dass meien CSS dam am Ziel vorbeischliesst :-)

dann ist aber das Bild nicht links sondern über den Text :-)

In welchen Browsern ist hierbei das Bild über dem Text. In den Browsern,
mit denen ich mal schnell draufgeschaut habe (Firefox 1.0.4, Opera 7.23,
Opera 8.0 und IE 6.0), bei mir  nicht.

bei dein Beispiel sieht das ganz gut aus
ich muss mal nachher schauen, was du geändert hast, mir fallen gleich die Augen zu ;)

mfg
Twilo

[Detlef G.]

Hallo Twilo

bei dein Beispiel sieht das ganz gut aus
ich muss mal nachher schauen, was du geändert hast, mir fallen gleich die Augen zu ;)

Wenn ich mich nicht täusche, habe ich lediglich die inneren Clears entfernt
und das eingefügt, was ich dir bereits geschrieben habe.

Auf Wiederlesen
Detlef

[Twilo]

Hallo,

bei dein Beispiel sieht das ganz gut aus
ich muss mal nachher schauen, was du geändert hast, mir fallen gleich die Augen zu ;)

Wenn ich mich nicht täusche, habe ich lediglich die inneren Clears entfernt
und das eingefügt, was ich dir bereits geschrieben habe.

das klappt soweit ganz gut, wenn es den IE nicht geben würde :-)
IE-Problem

entweder das Problem taucht gleich auf, oder man muss einfach nur Text innerhalb der Karte markieren

IE-Problem Screenshot

wie kann ich ihn das abgewöhnen?

mfg
Twilo

[Detlef G.]

Hallo Twilo

das klappt soweit ganz gut, wenn es den IE nicht geben würde :-)

IE-Problem Screenshot

wie kann ich ihn das abgewöhnen?

Das ist ein Bug  im IE (frage mich bitte nicht, wie genau dieser der vielen
heißt), der öfter mal bei oder/und neben gefloateten Bereichen auftaucht.
Der IE möchte dann eine eigentlich unsinnige Angabe im CSS haben.

  
* html #bildContainer3 {  
  height:1%;  
}  

Auf Wiederlesen
Detlef

[Twilo]

Hallo,

das klappt soweit ganz gut, wenn es den IE nicht geben würde :-)

IE-Problem Screenshot

wie kann ich ihn das abgewöhnen?

Das ist ein Bug  im IE (frage mich bitte nicht, wie genau dieser der vielen
heißt), der öfter mal bei oder/und neben gefloateten Bereichen auftaucht.
Der IE möchte dann eine eigentlich unsinnige Angabe im CSS haben.

• html #bildContainer3 {
    height:1%;
  }

  
funktionieren tut das auch so  
  
~~~css
/* Hide from IE5-mac. Only IE-win sees this. \*/  
* html #content, * html #bildContainer3, * html #textBereich{  
  height: 0%;  
}  
/* End hide from IE5/mac */

stellt sich mir jetzt nur die Frage, ob der IE-Mac das selbe Problem hat

mfg
Twilo

[Ingo Turski]

Hi,

stellt sich mir jetzt nur die Frage, ob der IE-Mac das selbe Problem hat

der Mac-IE ist ein völlig anderer Browser - eher mit Uralt-Mozillas zu vergleichen als mit dem Win-IE.

freundliche Grüße
Ingo

[Dada]

Guten Abend Twilo,

ich habe leider keinen MS IE auf meinem System und kann daher leider nicht viel helfen. Ich tippe jedoch bei

der margin Abstand wird mit 165px angegeben, warum haben Opera udn Firefox dann einen größeren Abstand, als der IE
im Firefox sind es ca. 180px
woher kommen diese 20px?

auf den Box-Model-Fehler: http://de.selfhtml.org/css/formate/box_modell.htm#.

Mit Gruß
Dada

[Twilo]

Hallo,

ich habe leider keinen MS IE auf meinem System und kann daher leider nicht viel helfen. Ich tippe jedoch bei

so wie hier auf'n Screensot, soll es aussehen
http://www.twilo.de/test/testseite_ie6.png

der margin Abstand wird mit 165px angegeben, warum haben Opera udn Firefox dann einen größeren Abstand, als der IE
im Firefox sind es ca. 180px
woher kommen diese 20px?

auf den Box-Model-Fehler: http://de.selfhtml.org/css/formate/box_modell.htm#.

das werd ich mir mal anschauen
Ich war eigentlich der Meinung, dass der IE das falsch berechnet, wenn er im quirks-Modus ist

mfg
Twilo