IE float bug

[Struppi]

Hallo.

Ich hab folgendes Problem http://javascript.jstruebig.de/test/float - bug.html

Die floatenden Elemente sollen nach rechts einen abstand halten, tun sie in den meisten Browsern auch. Natürlich nicht im IE (ich kann augenblicklich nur im IE 6 testen). Dort schieben sich diese Elemente unter die Navigation rechts.

Frage:

wie heißt der Bug?
gibt es einen workaround?

Wenn man dem body einen rechten margin Wert gibt, dann funktioniert es, aber dann ist die Überschrift nicht mehr breit genug.

eine andere Lösung ist mir noch nicht eingefallen.

Struppi.

[Ingo Turski]

Hi,

wie heißt der Bug?

wieso Bug? Vielleicht macht der IE es ausnahmsweise mal richtig?
Du hast das Menü absolut positioniert und damit aus dem Textfluß genommen. Der IE nutzt daher diesen Platz noch für ein floatendes Element.

gibt es einen workaround?

clear oder eine Begrenzung der Breite für die floatenden Elemente, die sicherstellt, daß nur zwei nebeneinander passen. Das dürfte spätestens bei entsprechend breiten Fenstern ohnehin nötig werden.

freundliche Grüße
Ingo

[Struppi]

wie heißt der Bug?
wieso Bug? Vielleicht macht der IE es ausnahmsweise mal richtig?
Du hast das Menü absolut positioniert und damit aus dem Textfluß genommen. Der IE nutzt daher diesen Platz noch für ein floatendes Element.

Das Menü ist gar nicht der Punkt. Das soll nur darstellen wofür ich den Platz brauche.

Das ist meine Definition des Inhaltes:
#inhalt
{
    margin-right:180px;
}

In dem stehen die Boxen.
Ich hab auch schon dran gedacht, das diese eigentlich nicht mehr in den Textfluss gehören. Also der IE (als einziger) es richtig macht. In Anbetracht der Bugs rund um das Boxmodell bin ich daher von einer Falschdarstellung im IE ausgegangen.

Ein workaround ist z.b. dem body diesen Abstand zu geben, dann schaffe ich es aber nicht (und das dummerweise wieder ausschließlich im IE) die Überschrift über die ganze Seite zu kriegen (mit margin-right: -180px; geht's im FF und OP)

gibt es einen workaround?
clear oder eine Begrenzung der Breite für die floatenden Elemente, die sicherstellt, daß nur zwei nebeneinander passen. Das dürfte spätestens bei entsprechend breiten Fenstern ohnehin nötig werden.

Das ist aber nicht das was ich will. Wenn ich Elemente floaten und links und rechts einen Abstand habe, will ich diese ja nicht zwingen ein Breite einzunehmen, dann kann ich die ganze Sache auch ohne float machen. Wer sagt denn das ich nicht auch drei Boxen nebeneinander will?

Also halten wir mal fest. Es ist ein Bug in allen anderen Browsern ausser dem IE? Der einzige wirklich sinnvolle Workaround der mir einfällt funktioniert nicht im IE?

Jemand noch Ideen?

Struppi.

[Tobias Müller]

Hallo Struppi,

Also halten wir mal fest. Es ist ein Bug in allen anderen Browsern ausser dem IE? Der einzige wirklich sinnvolle Workaround der mir einfällt funktioniert nicht im IE?

So wie es für mich aussieht, ist schon der IE der Übeltäter, da er ja offensichtlich das margin-right ignoriert bzw. vielmehr ausserhalb des rechten sichtbaren Fensterrandes verlagert. Weise dem #inhalt doch mal eine Breite zu. Beispielsweise 70% oder so. Ich könnte mir nämlich vorstellen dass es die fehlende Breitenangabe ist, die dem alten Bock nicht passt.

MfG, Mülli

[Struppi]

So wie es für mich aussieht, ist schon der IE der Übeltäter, da er ja offensichtlich das margin-right ignoriert bzw. vielmehr ausserhalb des rechten sichtbaren Fensterrandes verlagert. Weise dem #inhalt doch mal eine Breite zu. Beispielsweise 70% oder so. Ich könnte mir nämlich vorstellen dass es die fehlende Breitenangabe ist, die dem alten Bock nicht passt.

Tja, da hab ich auch dran schon gedacht.
Dumerweise soll links eine Grafik (als hintergrund hin) breite ca. 190px und das Menü hat dank Grafiken auch eine feste Breite (150px).

Mit dem float right (der Idee von Wahsaga) hat ich auch schon gespielt, aber da ist das gleiche Problem, der Inhalt drückt dies nach unten. Im Prinzip könnte ich versuchen den Inhalt links zu floaten und das Menü rechts, nur ohne Breitenangabe wird der Inhalt immer die ganze Breite annehmen.

Momentan kann ich das nicht ausprobieren, hab hier nur einen IE 4 und der floatet sehr merkwürdig.

Übrigens, das ganze ist keine Idee von mir, sondern nur ein Versuch ein bestehendes Layout zu ändern bzw. CSS tauglich zu machen. eigentlich fand ich die Anordnung nicht so problematisch, scheint es aber doch zu werden.

Struppi.

[Tobias Müller]

Hallo Struppi,

Übrigens, das ganze ist keine Idee von mir, sondern nur ein Versuch ein bestehendes Layout zu ändern bzw. CSS tauglich zu machen. eigentlich fand ich die Anordnung nicht so problematisch, scheint es aber doch zu werden.

Manchmal sind die scheinbar ganz einfachen CSS-Layouts viel schwieriger umzusetzen als komplexe Layouts... ;)

Das Problem hat mich ja doch sehr interessiert. Deshalb habe ich mir mal den Quelltext kopiert und ein bisschen rumprobiert.

Letztlich habe ich den IE6 mehr oder weniger unelegant überlisten können:

Um Folgendes habe ich die CSS ergänzt (nur für den IE):

* html {
 overflow-x:hidden;
}
* html #inhalt
{
 margin-right:0;
}
* html #box
{
 float:left;
 margin:0 180px 0 0;
}

Die gefloateten Boxen habe ich ausserdem noch mit einem Div mit der ID #box umschlossen:

<div id="box">
    <div class="foto">
 <p>Ein Element </p>
    </div>

<div class="foto">
 <p>Ein Element </p>
    </div>

<div class="foto">
 <p>Ein Element </p>
    </div>

<div class="foto">
 <p>Ein Element </p>
    </div>
    <br style="clear:left;">
</div>
<br style="clear:left;">

Zumindest bei mir klappt es mit IE6 und Firefox.

MfG, Mülli

[wahsaga]

hi,

Du hast das Menü absolut positioniert und damit aus dem Textfluß genommen. Der IE nutzt daher diesen Platz noch für ein floatendes Element.

Das Menü ist gar nicht der Punkt. Das soll nur darstellen wofür ich den Platz brauche.

hast du es denn mal probiert, das menü ebenfalls floaten zu lassen, anstatt es absolut zu positionieren - und wie der IE darauf reagiert?

gruß,
wahsaga

[Detlef G.]

Hallo Struppi

eine andere Lösung ist mir noch nicht eingefallen.

Vielleicht mal etwas quer denken und es so probieren:

http://d-graff.de/demos/selfhtml/float - bug.html

(ist nur in wenigen Browsern getestet)

Auf Wiederlesen
Detlef

[Struppi]

Als Abschluss.

Die Lösung von Tobias funktioniert soweit

Aber der Einwurf von Ingo ist durchaus berechtigt und ich bin noch nicht sicher wie ich das am besten löse. Das Problem ist das in den boxen ein Bild gefloatet wird. Da gibt es dann auch wieder Probleme, wenn zwei nebeneinader sollen.

Aber momentan hab ich die Baustelle erst mal wieder verlassen und meld micht wieder.

Danke.

Struppi.