IE Problem mit position:absolute

[Efchen]

Moin,

grad hab ich ein Problem noch selber hinbekommen...jetzt hänge ich erstmal.

Ich habe ein Element (Sidebar), das (aus einem bestimmten Grund) mit position:absolute positioniert ist.
Danach kommt der Content. Der bekommt ein festes margin-left mitgegeben.

Firefox reagiert wie erwartet: Die Sidebar ist mit position:absolute aus dem Fluss genommen, der Content liegt also darunter. Mit dem festen margin beginnt mein Text also neben der Sidebar.
Der IE positioniert meine Sidebar so, als hätte sie das selbe margin-left, die linke Seite meiner Sidebar schließt also nun mit dem Text aus dem Content ab.

Wenn ich dieses margin-left des Contents ändere, verschiebt sich die Sidebar immer mit.

Welcher Bug des IE ist das und wie kann ich ihn beheben?

Danke,
-Efchen

Nachtrag: Man muss nur immer mit jemandem über ein Problem reden, dann kommt man meist selber drauf. Wenn ich aus dem margin ein padding mache, dann funktionierts. Aber trotzdem - was ist der Grund für das Verhalten des IE?

 

[_Thor_]

Wenn ich dich recht verstehe, meinst du in etwa sowas hier?

<ul style="position: absolute; top: 15px; left: 15px; list-style-type: none; list-style-position: inside; width: 90px; border: 1px solid black;">
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>
<p id="content" style="margin-left: 150px;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
</p>

Funktioniert bei mir im IE7 wunderbar.

 

[prm]

@ Efchen:
Du regst uns mit deinen Ausführungen zwar wie immer sehr zum Nach- und Mitdenken an. Aber wie wär's mit einem Stück Quelltext oder einem Link?

 

[Efchen]

Ihr kennt doch die Antworten darauf :-)

- Da ist Inhalt drin, der nicht für Eure Augen gedacht ist.
- Ein Link ist nicht möglich, da die Seite im Intranet steht.
- Ich dachte, Ihr könntet damit schon was anfangen.

usw. ;-)

Trifft sogar alles 3 hierdrauf zu. Aber ich kann ja morgen mal eine Testseite zusammenbasteln. Jetzt ist Feierabend :-)

Prinzipiell so wie Thor geschrieben hat, aber wenn es bei ihm funktioniert, muss ja irgendwo ein Unterschied sein...denn das Problem tritt bei mir im IE7 auf. Wie geschrieben, mit padding gehts dann.

 

[prm]

Ist vielleicht nur ein Tippfehler, über den manche Browser großzügiger hinwegsehen.
Deshalb wäre Code Link zu Testseite (den Inhalt kannst du ja löschen oder mit Lorem ipsum ersetzen, interessiert uns nicht) besser.

 

[Efchen]

Ich könnt ja auch antworten "Hey, ich dachte, Ihr Oberfuzzies hier wäret so gut, dass Ihr das ohne Code hinbekommt" ;-)

Hier der Link: Testseite html.de

Der Fehler ist eingebaut, im IE7 siehts nicht so aus, wie im Firefox und wie ich mir das vorstelle. Den Fehler hab ich im Code markiert (div#Content), auch wie ich es beheben konnte.

Bin gespannt, wie viele Mitleser jetzt wie Aasgeier über mich herfallen, den Code div-Suppe nennen usw. ;-) Aber ich werde solche Seitenhiebe einfach überlesen ;)

Danke für Eure Mühen.

 

[prm]

Dreh mal die Reihenfolge um, dann klappt's im IE. habs mir damit allerdings nicht im FF angesehen.

 <div id="Page">
 
    <div id="Content">
      <h2>Kundendatenbank</h2>
      <p>Derzeit gibt es noch keine Daten. Der Aufbau der Site ist
      derzeit in Arbeit.</p>
    </div><!--Ende Content-->
<div id="Sidebar">
      <div id="MenuOben"></div>
      <ul id="Menu">
        <li><a href="[URL="http://www.firma.de/%22%3EFirma"]http://www.firma.de/">Firma[/URL] Website</a></li>
        <li><a href="[URL="https://seite%22%3ebugzilla%3c/a%3E%3C/li"]https://seite">Bugzilla</a></li[/URL]>
        <li><a href="[URL="https://seite%22%3ekundenliste%3c/a%3E%3C/li"]https://seite">Kundenliste</a></li[/URL]>
        <li><a href="[URL="https://seite%22%3einfo/"]https://seite">Info[/URL] zu einem Kunden</a></li>
      </ul>
      <div id="MenuEnde"></div>
    </div><!--Ende Sidebar-->
  </div><!--Ende Page-->

Bezug von #Content ist dann eindeutig das Elternelement #Page.
So recht erklären kann ich's mir aber trotzdem nicht.

Hinweis:
Dies ist eine pragmatische, keine theoretische Lösung. Zu letzterer und dem Quelltext insgesamt wird sicher Efchen noch einige Ausführungen machen. ;-)

 

[Efchen]

Ja, funktioniert. Auch im Firefox!

Welche Lösung würdest Du favorisieren? Sidebar nach unten verschieben oder statt margin-left padding-left verwenden?

Ja, von diesem Efchen habe ich auch schon gehört. Ich hoffe, dass der im Urlaub ist, der würde meinen Code sicher als div-Suppe zerreissen. Beim letzten Mal, als er das gemacht hat, hab ich mich 1 Woche im Schrank versteckt!

 

[prm]

Vom HTML-Aufbau her erscheint mir - bezogen auf die Reihenfolge der Div's deine Lösung logischer.
Aber du kennst mich ja: Hauptsache es funktioniert und ist halbwegs richtig.
Da wäre eigentlich Efchen dein richtiger Ansprechpartner.

 

[Loon3y]

Ja, funktioniert. Auch im Firefox!

Welche Lösung würdest Du favorisieren? Sidebar nach unten verschieben oder statt margin-left padding-left verwenden?

Ja, von diesem Efchen habe ich auch schon gehört. Ich hoffe, dass der im Urlaub ist, der würde meinen Code sicher als div-Suppe zerreissen. Beim letzten Mal, als er das gemacht hat, hab ich mich 1 Woche im Schrank versteckt!

Ich kann zwar schlecht was dazu sagen, da mir vieles noch an wissen fehlt, aber ich werd trotzdem was sagen.

Padding ist doch eigentlich für den innenabstand gedacht, also wäre es doch fehl am platz, elemente mit padding zu positionieren oder? dafür ist ja eigentlich margin gedacht. Anderseits ist es recht unübersichtlich wenn das menu weit unten kommen würde. Das passt vom Aufbau der Seite nicht so ganz.

Wieso bezeichnest du den quelltext als div-suppe? Wie würdest du es sonst anders gestalten?

 

[Efchen]

Padding ist doch eigentlich für den innenabstand gedacht, also wäre es doch fehl am platz, elemente mit padding zu positionieren oder?

Ja, so in die Richtung geht mein erster Gedanke allerdings auch.

Anderseits ist es recht unübersichtlich wenn das menu weit unten kommen würde. Das passt vom Aufbau der Seite nicht so ganz.

Aber ist es nicht auch so, dass es für Vorlesebrowser angenehmer ist, wenn das Menü erst nach dem Content kommt? Für visuelle Browser liegt das Menü ja da, wo man es erwarten würde, bei Clients, die die Struktur analysieren kommt halt das wichtigere - der Content - zuerst.

Wieso bezeichnest du den quelltext als div-suppe? Wie würdest du es sonst anders gestalten?

Aus Jux :-)
Weil ich z.B einen wrapper habe, der nur ein Element <h1> umschließt und meine Stadardbemerkung bei sowas ist: "Wozu das div, Du gruppierst doch nicht mehrere Elemente". Hier ist der Wrapper aber für die Positionierung am unteren Rand des Elements nötig.

Außer bei den divs für die dämlichen Hintergrundbilder des Menüs glaube ich nicht, dass ich div-Suppe koche. Aber um dieses Design mit diesen Bildern genau so umzusetzen, war es IMHO nötig, den div-Streuer etwas öfter zu schütteln.

 

[neuroleptika]

Der IE berechnet automatische Werte für position: absolute; etwas eigenartig.

Zu jedem position:absolute; ein top oder bottom und left oder right

Ein sicherer Ausgangspunkt ist #Page:

div#Page {
max-width:950px;
margin:0 auto;
[COLOR="DarkRed"][B]position: relative;[/B][/COLOR]
}


div#Sidebar {
width:199px;
background:url(http://www.efchen-systems.de/tmp/css/head.gif)    no-repeat;
padding-top:119px;
position:absolute;
[COLOR="DarkRed"][B]top:-159px;
left: 0px;[/B][/COLOR]
margin-left:0;
}

Den Pfad vom background habe ich nur zum ausprobieren geändert.

Nachtrag:
wegen des Footers
Suche: footerStickAlt

 

[Loon3y]

Aber ist es nicht auch so, dass es für Vorlesebrowser angenehmer ist, wenn das Menü erst nach dem Content kommt? Für visuelle Browser liegt das Menü ja da, wo man es erwarten würde, bei Clients, die die Struktur analysieren kommt halt das wichtigere - der Content - zuerst.

Bei der Sache padding oder margin haben wir ja schon einen gemeinsamen Nenner. Allerdings bin ich hier anderer Meinung.
Wenn ich mich jetzt in die Situation eines Menschen versetze der etwas vorgelesen bekommen soll, dann möchte ich doch zu erst wissen was für Auswahl mir die besuchte Seite bietet. Zumal es auch dafür wichtig ist, wenn dieser schon längst weiß wohin er will. So, wenn erst der Content kommt, muss er sich erst den Content "rein ziehen", bevor er auf das Menu stößt...wäre für mich ehrlich gesagt nervig.

Eine Präsentation / Einen Report fängt man doch auch erst mit dem Inhaltsverzeichnis an und dann das Textliche, nicht anders herum :)

Allerdings ist das oben "nur" für das Intranet, da wird scih keiner was vorlesen lassen oder? Aber...ist auch irgendwie eine Grundsatzdiskussion, immerhin könnte dann auch wer ankommen (ganz krass ausgedrückt) und sagen "fürs Intranet taugt dann auch eine vorgefertigte Seite in Tabellenlayout".

 

[neuroleptika]

..So, wenn erst der Content kommt, muss er sich erst den Content "rein ziehen", bevor er auf das Menu stößt...wäre für mich ehrlich gesagt nervig....

Bei so einer kleinen Navigation ist das vielleicht egal.
Wenn man aber auf jeder Unterseite alle Links erst wegtabben muß, ist das schon nervig.
Ein mit position-absolute; verstecktes Sprungmenü schafft hier Abhilfe.

 

[gaby]

Ja, funktioniert. Auch im Firefox!

Welche Lösung würdest Du favorisieren? Sidebar nach unten verschieben oder statt margin-left padding-left verwenden?

Eigentlich keines von beiden. ;-)
zu 1.
Bei der Reihenfolge der Boxen #Sidebar und #Content schließe ich mich der Meinung von prm und loon3y an.
Zuerst die Navi, dann der Inhalt.
Damit die Links in alternativen Browsern nicht immer wieder von Neuem heruntergebetet werden, könnte man ja oben einen unsichtbaren Link einfügen mit den alt-Text "skip to Ende-Navi".

zu 2.
padding statt margin könnte unbequem werden, wenn Du unterschiedliche Hintergründe oder Border für #content vergeben wolltest.

Was der IE-6 sich da wieder zusammenspinnt, weiß ich leider auch nicht.
Für mich sah das irgendwie so aus, wie bei collapsing-margins, nur diesmal horizontal.
Also habe ich versucht, die beiden Boxen nicht aneinandergrenzen zu lassen.

Es funktioniert, wenn Du zwischen #sidebar und #content noch ein Element einschiebst, zb <br>.
<hr> geht auch, oder einfach ein leeres div, wobei ich <br> noch am besten finde.


Grüße
gaby

 

[koslowski]

Moin,

Nachtrag:
wegen des Footers
Suche: footerStickAlt

jep, "FootStickerAlt" ist die bewährte und sichere Methode die browserübergreifend einwandfrei funktioniert.
Efchen's Methode (FooterStick) ist da eher suboptimal, weil es bei älteren Gecko-Engines zu Fehlern kommt:
z.B. die Fußzeile wird nicht korrekt positioniert, wenn sich die Höhe des Inhalts während des Ladevorgangs stark ändert. Das abslout pos. Element bleibt dann an der zuerst bestimmten Position stehen und wandert nicht mit dem wachsenden Inhalt nach unten.(Quelle: Fortgeschrittene CSS-Techniken )

Bezüglich #sidebar und #content wäre vielleicht zu überlegen die absol. Posit. für dieses Element herauszunehmen und es zusammen mit #content floaten zu lassen.
Position:absolute erzeugt zwar einen "Block Formatting Context", der aber so absolut ist, das er von aussen nicht beeinflußt werden kann.
Der durch float für #sidebar und #content erzeugte "BFC" hätte den Vorteil, das es ein die beiden Elemente betreffender ist.
Um #sidebar nach oben zu schieben käme vielleicht ein negativer margin-top in Frage.
Habe es nicht getestet, würde es nur instinktiv so versuchen. :)

koslowski

 

[neuroleptika]

Tach Klaus
Efchen hat auch FooterStick nicht verwendet. Der Footer ist einfach absolute von body ausgerichtet. Deswegen habe ich es überhaupt erwähnt.

Der Inhalt von Footer hat nur eine Mindesthöhe und erlaubt einen Zeilenumbruch. Mit etwas mehr Inhalt ist das nicht mehr zu kontrollieren.

...
Der durch float für #sidebar und #content erzeugte "BFC" hätte den Vorteil, das es ein die beiden Elemente betreffender ist.
Um #sidebar nach oben zu schieben käme vielleicht ein negativer margin-top in Frage.

Stimmt schon.
Wenn #sidebar + #content gefloatet und gemeinsam eingeschlossen würden könnte #sidebar (in der Höhe) mitwachsen wie sie will.

Ich habe das nicht weiter beachtet weil die #sidebar so klein ist, daß #content vermutlich immer die höhere Box sein wird.

Hast du das Buch durchgeackert?

 

[gaby]

Bezüglich #sidebar und #content wäre vielleicht zu überlegen die absol. Posit. für dieses Element herauszunehmen und es zusammen mit #content floaten zu lassen.
[...]
Um #sidebar nach oben zu schieben käme vielleicht ein negativer margin-top in Frage.
Habe es nicht getestet, würde es nur instinktiv so versuchen. :)
koslowski

Das würde aber bewirken, daß die #sidebar nun relativ zu #page positioniert wird.
Der Nachteil wäre, mit Blick auf das Design, daß das schwarze Fenster der #sidebar nicht mehr genau mit dem #header abschließt, wenn Efchen zwischen #header und #page noch weitere Elemente (zb eine breadcrumb-zeile) einfügen würde. Eine Neuberechnung des Abstandes wäre dann auch problematisch, wenn das eingefügte Element eine variable Höhe hätte.

Mit 'position: absolute', geht der Bezug von #sidebar in der Höhe auf BODY über, was ich für dieses Design für pflegeleichter in Bezug auf künftige Veränderungen halten würde.

Wenn man allerdings weiß, daß zwischen #header und #page auch künftig nichts mehr verändert werden soll, fände ich deinen Vorschlag ebenfalls besser, als die jetzige Lösung, vor allem sicherer, mit Blick auf den IE-6.

 

[neuroleptika]

Wenn man allerdings weiß, daß zwischen #header und #page auch künftig nichts mehr verändert werden soll, fände ich deinen Vorschlag ebenfalls besser, als die jetzige Lösung, vor allem sicherer, mit Blick auf den IE-6.

Der IE sollte keine Probleme haben, wenn das relative positionierte Elternelemnt Layout hat.
Im IE7 ist es durch max-width schon gegeben. Für IE6 muß nachgeholfen werden:

div#Page {
	max-width:950px;
	margin:0 auto;
            position: relative;
}
* html div#Page {
/*z.B:*/width: 900px; 
}

Wenn die Navigation so klein bleibt würde ich es absolute Positionieren.
Wenn nicht würde ich auch Koslowskis vorschlag wählen.

Erstmal müßte aber der Footer richtig gesetzt werden.
Ich empfehle auch footerStickAlt.
Wenn man sowas aufschiebt, könnte man später mit den positionierungen (z-index) durcheinander kommen.

 

[koslowski]

Tach Jens,

schön wieder was von dir zu hören. :-)

Tach Klaus
Efchen hat auch FooterStick nicht verwendet. Der Footer ist einfach absolute von body ausgerichtet. Deswegen habe ich es überhaupt erwähnt.

Der Inhalt von Footer hat nur eine Mindesthöhe und erlaubt einen Zeilenumbruch. Mit etwas mehr Inhalt ist das nicht mehr zu kontrollieren.

ups, da hab ich wieder nicht so genau hingeschaut.
Egal, an "FootStickerAlt" führt normal eh kein Weg vorbei.

Hast du das Buch durchgeackert?

jep, hab ich. Da wurde meine Nase dann zielsicher in die Haufen "Wissen" gedrückt, den ich bisher noch nicht wahrgenommen hatte.
Und das war mehr als ich bisher dachte. :shock:

Das Buch ist derartig mit Wissen vollgepackt, das ist der Wahnsinn.
Für Profis imho eine absolute Pflichtlektüre oder Nachschlagewerk.

Solltest du es noch nicht dein eigen nennen: Unbedingt kaufen, es lohnt sich unbedingt!

koslowski