Problem mit <div>s im IE

[taz112]

Hallo zusammen, ich arbeite mich gerade in CSS-Design ein und habe ein Problem bei folgender Seite: http://www.feuerwehr-leimen.de/akedv/kai/index_css.html

Nämlich werden die Ebenen content, navigator und news im IE rein an den Inhalt angepasst und bekommen nicht die zugewiesenen Grenzen.

Opera und Firefox stellen die Ebenen korrekt an.

Kann mir hier jemand helfen?

Vielen Dank.

[Ingo Turski]

Hi,

Du defibnierst:
#content {position: absolute; z-index: 1; left: 164px; top: 188px; right: 164px; bottom: 42px; overflow: auto}
und eigentlich würde ich hier ausnahmsweise mal dem IE Recht geben. Ohne Höhenangabe sollte overflow nicht wirkam sein. Und für die absolute Positionierung - die eigentlich hier völlig unsinnig ist - sind zwei Eckwerte vorgesehen.

freundliche Grüße
Ingo

[Cyx23]

Hallo Ingo,

#content {position: absolute; z-index: 1; left: 164px; top: 188px; right: 164px; bottom: 42px; overflow: auto}
und eigentlich würde ich hier ausnahmsweise mal dem IE Recht geben. Ohne Höhenangabe sollte overflow nicht wirkam sein. Und für die absolute Positionierung - die eigentlich hier völlig unsinnig ist - sind zwei Eckwerte vorgesehen.

bei overflow:auto ist das Browserverhalten doch sowieso nicht genau festgelegt?

Und welche zwei Eckwerte fehlen dir hier bei position:absolute, meinst du dass top und left unbedingt nötig sind?

Grüsse

Cyx23

[MudGuard]

Hi,

#content {position: absolute; z-index: 1; left: 164px; top: 188px; right: 164px; bottom: 42px; overflow: auto}
und eigentlich würde ich hier ausnahmsweise mal dem IE Recht geben. Ohne Höhenangabe sollte overflow nicht wirkam sein. Und für die absolute Positionierung - die eigentlich hier völlig unsinnig ist - sind zwei Eckwerte vorgesehen.

Es ist doch die linke obere Ecke und die rechte untere Ecke vorgegeben. Also 2 Eckwerte.
Eine zusätzliche Angabe von width oder height würde nur zu Konflikten führen.

cu,
Andreas

[Ingo Turski]

Hi,

Es ist doch die linke obere Ecke und die rechte untere Ecke vorgegeben. Also 2 Eckwerte.

die Frage ist nur, ob diese zwei Werte auch verwendet werden. Warum nicht right und bottom - die zuletzt genannten?
Und um die Frage von Cyx23 aufzugreifen: Mir fehlen nicht zwei Werte, es sind AFAIK zwei zuviel. Zumindest sollte das einen Interpretationsspielraum für die Browser eröffnen, oder?

freundliche Grüße
Ingo

[MudGuard]

Hi,

Es ist doch die linke obere Ecke und die rechte untere Ecke vorgegeben. Also 2 Eckwerte.
die Frage ist nur, ob diese zwei Werte auch verwendet werden. Warum nicht right und bottom - die zuletzt genannten?

Hä?
Es geht mir jetzt so wie Robert weiter unten. Liest Du, worauf Du antwortest?

Und um die Frage von Cyx23 aufzugreifen: Mir fehlen nicht zwei Werte, es sind AFAIK zwei zuviel.

Um ein Rechteck zu bestimmen, sind 4 Angaben (je zwei pro Achse) nötig.

cu,
Andreas

[Ingo Turski]

Hi,

Um ein Rechteck zu bestimmen, sind 4 Angaben (je zwei pro Achse) nötig.

stimmt natürlich, aber hier hast Du meine Ausführungen nicht richtig verstanden; vielleicht habe ich mich aber auch nicht klar genug ausgedrückt. Ich verstehe die Angaben zu Position so wie in Selfhtml beschrieben:

"Die Angabe position: legt noch nicht fest, wo genau ein Element beginnen soll. Die Angabe macht nur Sinn, wenn Sie zugleich die gewünschte Startposition angeben."

also als Festlegung der Startposition und eben nicht als Definition eines Rechtecks. Und in der Tat liegt hierin das Problem des Fragestellers mit dem IE, da der IE diese Angaben genauso interpretiert - im Gegensatz zum Mozilla und Opera. Bei mehr als zwei Angaben berücksichtigt der IE vorzugsweise diejenigen zu top und left und ignoriert die übrigen.

Bei der hier vorgestellten Seite kommt Im IE ein blocklevel-Element heraus an der Position, die zu top und left angegebenen ist, das keine Breite und keine Höhe hat (was ein Fehler sein könnte [*]). Da der IE nun so nett ist, und zu klein bemessene blocklevel-Elemente passend für den Inhalt ausdehnt, wird dieser trotzdem hierin angezeigt. Nur funktioniert halt overflow nicht.

Es mag sein, daß Mozilla und Opera die Positionsangaben richtiger interpretieren und bei Angabe aller vier Eckpunkte tatsächlich auch Weite und Höhe berechnen; http://www.w3.org/TR/REC-CSS2/visuren.html#position-props sagt lediglich
"This property specifies how far a box's top content edge is offset below the [top] edge of the box's containing block."
was durchaus so ausgelegt werden kann, wie diese Browser es tun.

[*] Mozilla und Opera berücksichtigen zumindest bei drei Angaben zur Position ebenfalls nur die hierdurch festgelegten Eckpunkte, so daß das Element keine Weite bzw. Höhe bekommt.

freundliche Grüße
Ingo

[MudGuard]

Hi,

Bei der hier vorgestellten Seite kommt Im IE ein blocklevel-Element heraus an der Position, die zu top und left angegebenen ist, das keine Breite und keine Höhe hat (was ein Fehler sein könnte [*]). Da der IE nun so nett ist, und zu klein bemessene blocklevel-Elemente passend für den Inhalt ausdehnt, wird dieser trotzdem hierin angezeigt. Nur funktioniert halt overflow nicht.

Das macht der IE falsch. Es sind alle Angaben zu berücksichtigen. Wenn eine der Angaben zu top/left/right/bottom/width/height fehlt, wird deren initial value (sprich: auto) vorausgesetzt.

Aus der Beschreibung zu position (http://www.w3.org/TR/REC-CSS2/visuren.html#position-props):

absolute
    The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block.

Da steht nix davon, daß nur left und top zu benutzen sind.

Desweiteren ist es falsch, bei festen Größenangaben und overflow:visible (der Default) die Boxgröße an den Inhalt anzupassen
(http://www.w3.org/TR/REC-CSS2/visufx.html#propdef-overflow):

visible
    This value indicates that content is not clipped, i.e., it may be rendered outside the block box.

Da steht, daß der Inhalt bei zu großem Platzbedarf AUSSERHALB der Box weitergeht.

cu,
Andreas

[Ingo Turski]

Hi,

Aus der Beschreibung zu position (http://www.w3.org/TR/REC-CSS2/visuren.html#position-props):

absolute
    The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block.

Da steht nix davon, daß nur left und top zu benutzen sind.

Das ist mir ja schon klar gewesen, allerdings hatte ich den kleinen eingeschobenen Zusatz "(and possibly size)" überlesen, der ja nahelegt, daß über die Festlegung aller vier Eckpunkte die Größe bestimmt werden kann.

freundliche Grüße
Ingo

[taz112]

Hi,

Du defibnierst:
#content {position: absolute; z-index: 1; left: 164px; top: 188px; right: 164px; bottom: 42px; overflow: auto}
und eigentlich würde ich hier ausnahmsweise mal dem IE Recht geben. Ohne Höhenangabe sollte overflow nicht wirkam sein. Und für die absolute Positionierung - die eigentlich hier völlig unsinnig ist - sind zwei Eckwerte vorgesehen.

freundliche Grüße
Ingo

Aber wieso funktioniert es dann auch nicht, wenn ich z.B. Height auf 100% setze, das hatte ich auch schon ausprobiert...
Irgendwie bin ich ratlos, das für mein Verständnis eigentlich genug Werte angegeben sind.
Ich möchte natürlich ungern eine pixelgenaue Höhe angeben, weil das ja nur für eine Auflösung passen würde.

Grüße TAZ112

[Ingo Turski]

Hi,

Ich möchte natürlich ungern eine pixelgenaue Höhe angeben, weil das ja nur für eine Auflösung passen würde.

Brauchst Du auch nicht und wenn Dir eine gute Nutzbarkeit wichtig ist, würde ich in Erwägung ziehen, auf die absolute Positionierung der Elemente sowie auf den seitenintern scrollbaren Bereich zu verzichten. Du könntest das Layout auch über float und margin realisieren und ich fände ein Scrollen der gesamten Seite auch wesentlich angenehmer.

freundliche Grüße
Ingo

[MudGuard]

Hi,

Hallo zusammen, ich arbeite mich gerade in CSS-Design ein und habe ein Problem bei folgender Seite: http://www.feuerwehr-leimen.de/akedv/kai/index_css.html
Nämlich werden die Ebenen content, navigator und news im IE rein an den Inhalt angepasst und bekommen nicht die zugewiesenen Grenzen.

Nimm mal die Unterstriche aus den Id-Werten raus. Die wurden in CSS 2.0 erst nachträglich in den Errata erlaubt - würde ich also vermeiden.

cu,
Andreas