border verändert die Position eines divs?

[romy]

Hi alle,

ich schraube zur zeit ein bisschen an der Website meines Fussballvereins.
Jetzt fuchst es mich aber doch ganz schön. Wenn man die Seite so anschaut, wie sie jetzt ist, rückt sie im Firefox irgendwie nach unten (sie sollte keinen oberen Abstand haben), setze ich jetzt einen border 1px in das div.aussen (hab ich probiert, weil ich wissen wollte, wo der Abstand herkommt.) rutscht das div wieder nach oben, wo es hinsoll. Das irritiert mich, ich nehme an, es gibt einen Zusammenhang, aber der wird mir nicht klar.
Ich schätze ich habe noch Denkfehler drin, was die Positionierung betrifft. Im IE 6.0 sieht es so aus wie geplant, im IE 7, ist der Contentbereich zu weit links und im Firefox rutscht der Contentbereich sogar ins Menu rein.
Ich bin überfragt, habt ihr eine Idee für mich?

Das CSS findet man hier

Vielen Dank!

ciao
romy

[stareagle]

wie sie jetzt ist, rückt sie im Firefox irgendwie nach unten (sie sollte keinen oberen Abstand haben), setze ich jetzt einen border 1px in das div.aussen (hab ich probiert, weil ich wissen wollte, wo der Abstand herkommt.) rutscht das div wieder nach oben, wo es hinsoll.

Wenn ich mir die Seite anschaue, hab ich den starken Verdacht das du die Seite zuerst im IE getestet hast... Jedenfalls sieht die Seite im Firefox überhaupt nicht gut aus.

Was die Sache mit border angeht: s. hier: http://de.selfhtml.org/css/formate/box_modell.htm

Außerdem fehlt deiner Seite der Doctype, was dazu führt, das der IE sich in den "ich-rate-mal-was-gemeint-ist"-Modus (auch Quirks-Modus oder Kompatiblitätsmodus genannt). Dadurch interpretiert der IE CSS nicht wirklich standardkonform.

Mehr zu Doctypes: http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp

Das übliche Rezept: Seite erstellen und im Firefox testen. Wenn die Seite fertig ist, im IE6 und IE7 anschauen und schreien ;-)

Wobei: Wenn man nicht jedes Element auf einer exakten Position festtackert, sondern mit float etc. arbeitet, sich damit abfindet, das die Elemente nicht im jedem Browser auf pixelgenauen gleichen Position sind, kommt man mit einem relativ kleinem zusätzlichen Stylesheet für den IE aus.

Wie man ein zusätzliches Stylesheet mit speziellen Angaben für den IE einbaut steht hier: http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative

Für den Firefox ist die Web Developer Bar sehr hilfreich:

http://chrispederick.com/work/web-developer/

Ich hoffe ich konnte etwas Licht ins Dunkel bringen.

Gruß

Stareagle

[romy]

Hi stareagle,

Wenn ich mir die Seite anschaue, hab ich den starken Verdacht das du die Seite zuerst im IE getestet hast... Jedenfalls sieht die Seite im Firefox überhaupt nicht gut aus.

Ich muss aus Zeitgründen die Arbeitsumgebung nehmen, die ich kriegen kann. ;)

Was die Sache mit border angeht: s. hier: http://de.selfhtml.org/css/formate/box_modell.htm

Dadurch verstehe ich trotzdem nicht, warum der border eine Verschiebung des Divs bewirkt :( ???

Außerdem fehlt deiner Seite der Doctype, was dazu führt, das der IE sich in den "ich-rate-mal-was-gemeint-ist"-Modus (auch Quirks-Modus oder Kompatiblitätsmodus genannt). Dadurch interpretiert der IE CSS nicht wirklich standardkonform.

Aber ich habe doch einen Doctype!?

Ich hoffe ich konnte etwas Licht ins Dunkel bringen.

Ja und nein ;) Auf jeden Fall hat es jetzt so geklappt wie ich es gern möchte, aber ich verstehe es noch nicht so ganz.

ciao
romy

[romy]

Hi,

Ich hoffe ich konnte etwas Licht ins Dunkel bringen.
Ja und nein ;) Auf jeden Fall hat es jetzt so geklappt wie ich es gern möchte, aber ich verstehe es noch nicht so ganz.

Ich sehe gerade, dass der IE 6.0 jetzt totalen Murks macht. Kann für mich mal jemand im Opera gucken?
Also muss ich doch ein alternatives Script für den IE 6 einstellen, bloss was muss ich diesem Skript sagen??? Welchen Befehl verteht er denn jetzt nicht? Ich wäre noch über etwas Hilfe sehr dankbar.
Ich habe auch versucht, noch etwas über collapsing margins rauszubekommen, aber ich verstehe einfach nicht, was mir damit gesagt wird, egal auf welcher Seite ich dazu was lese...irgendwie fehlt mir noch der Ansatz.

ciao
romy

[Detlef G.]

Hallo romy

Jetzt fuchst es mich aber doch ganz schön. Wenn man die Seite so anschaut, wie sie jetzt ist, rückt sie im Firefox irgendwie nach unten (sie sollte keinen oberen Abstand haben), setze ich jetzt einen border 1px in das div.aussen (hab ich probiert, weil ich wissen wollte, wo der Abstand herkommt.) rutscht das div wieder nach oben, wo es hinsoll. Das irritiert mich, ich nehme an, es gibt einen Zusammenhang, aber der wird mir nicht klar.

Beschäftige dich mal mit Collapsing margins (Zusammenfallenden Rändern).

Auch die Ränder ineinandergeschachtelter Elemente fallen zusammen, wenn sie nicht voneinander getrennt werden. Das kann z.b. durch border oder padding geschehen. (padding:1px; würde sich für #aussen anbieten)

Auf Wiederlesen
Detlef

[romy]

Hi Detlef,

Beschäftige dich mal mit Collapsing margins (Zusammenfallenden Rändern).

Auch die Ränder ineinandergeschachtelter Elemente fallen zusammen, wenn sie nicht voneinander getrennt werden. Das kann z.b. durch border oder padding geschehen. (padding:1px; würde sich für #aussen anbieten)

Dein Tipp mit dem Padding hilft, aber ich kann auch aus der Verlinkung nicht erkennen warum? Warum verschiebt sich das DIV, wenn es kein Padding oder Rahmen bekommt. Nur weil die Rahmen zusammenfallen dürfte es sich ja nicht nach unten verschieben, oder wo hakt es hier bei mir?

Vielen Dank!

ciao
romy

[Detlef G.]

Hallo romy

... Nur weil die Rahmen zusammenfallen dürfte es sich ja nicht nach unten verschieben, oder wo hakt es hier bei mir?

Nicht die Rahmen fallen zusammen, sondern die Ränder.
Wenn zwei senkrechte Ränder (margin-top, margin-bottom) zusammenfallen, dann erhalten die Elemente den größeren der beiden als gemeinsamen Rand. Liegen die Elemente mit den zusammenfallenden Rändern ineinander dann bekommt das äußere Element den resultierenden.

In deinem Fall fiel margin-top von #content (margin:220px 0px 0px 50px;) direkt mit margin-top von #aussen (margin:auto; entspricht margin:0 auto 0 auto;) zusammen. Also bekam #aussen die 220px margin-top von #content.

Auf Wiederlesen
Detlef

[romy]

Hi Detlef,

Nicht die Rahmen fallen zusammen, sondern die Ränder.
Wenn zwei senkrechte Ränder (margin-top, margin-bottom) zusammenfallen, dann erhalten die Elemente den größeren der beiden als gemeinsamen Rand. Liegen die Elemente mit den zusammenfallenden Rändern ineinander dann bekommt das äußere Element den resultierenden.

In deinem Fall fiel margin-top von #content (margin:220px 0px 0px 50px;) direkt mit margin-top von #aussen (margin:auto; entspricht margin:0 auto 0 auto;) zusammen. Also bekam #aussen die 220px margin-top von #content.

Das habe ich verstanden, danke schön.

ciao
romy

[MudGuard]

Hi,

Wenn man die Seite so anschaut, wie sie jetzt ist, rückt sie im Firefox irgendwie nach unten (sie sollte keinen oberen Abstand haben), setze ich jetzt einen border 1px in das div.aussen (hab ich probiert, weil ich wissen wollte, wo der Abstand herkommt.) rutscht das div wieder nach oben, wo es hinsoll. Das irritiert mich, ich nehme an, es gibt einen Zusammenhang, aber der wird mir nicht klar.

Informiere Dich über collapsing margins

Im IE 6.0 sieht es so aus wie geplant,

das ist meist ein schlechtes Zeichen ;-)

im IE 7, ist der Contentbereich zu weit links und im Firefox rutscht der Contentbereich sogar ins Menu rein.

Vielleicht bist Du auf den IE6-Bug mit den doppelten Margins bei floatenden Elementen reingefallen?

cu,
Andreas

[romy]

Hi MudGuard,

Informiere Dich über collapsing margins

Ich verstehe es einfach nicht, wie auch schon den anderen geschrieben...mhm.

Im IE 6.0 sieht es so aus wie geplant,
das ist meist ein schlechtes Zeichen ;-)

Ich weiß ja, aber ich kann mir momentan meine Arbeitsumgebung nicht aussuchen.

im IE 7, ist der Contentbereich zu weit links und im Firefox rutscht der Contentbereich sogar ins Menu rein.
Vielleicht bist Du auf den IE6-Bug mit den doppelten Margins bei floatenden Elementen reingefallen?

nein ich glaube nicht, den kannte ich tatsächlich, aber du hast mich trotzdem auf die richtige Fährte gelockt. Ich habe dann mal noch ein paar Rahmen gesetzt und siehe da, mein Menu steckte gar nicht im Menudiv, sondern irgendwie draussen. Alles gerichtet und schon war auch der Contentbereich wieder korrekt...

Vielen vielen Dank!

ciao
romy

[romy]

Hi,

im IE 7, ist der Contentbereich zu weit links und im Firefox rutscht der Contentbereich sogar ins Menu rein.
Vielleicht bist Du auf den IE6-Bug mit den doppelten Margins bei floatenden Elementen reingefallen?
nein ich glaube nicht, den kannte ich tatsächlich,

Doch ich bin zumindest im IE 6 drauf reingefallen, nur wie kann ich ihn überreden, dass nicht zu tun?

ciao
romy

[romy]

Hi,

im IE 7, ist der Contentbereich zu weit links und im Firefox rutscht der Contentbereich sogar ins Menu rein.
Vielleicht bist Du auf den IE6-Bug mit den doppelten Margins bei floatenden Elementen reingefallen?
nein ich glaube nicht, den kannte ich tatsächlich,
Doch ich bin zumindest im IE 6 drauf reingefallen, nur wie kann ich ihn überreden, dass nicht zu tun?

Ich habe zwar gar kein float im Einsatz, aber der Tipp, den ich hier gefunden habe, hilft trotzdem.

ciao
romy

[MudGuard]

Hi,

Ich habe zwar gar kein float im Einsatz,

Ach ja?

in http://www.frauenfussballsv09hofheim.de/test/css/old.css:

#menu{
float:left;

im HTML:
<link rel="stylesheet" type="text/css" href="css/old.css" />
<div id="menu">

cu,
Andreas

[romy]

Hi Andreas,

in http://www.frauenfussballsv09hofheim.de/test/css/old.css:
#menu{
float:left;
im HTML:
<link rel="stylesheet" type="text/css" href="css/old.css" />
<div id="menu">

Ups, da hab ich wohl noch was nicht richtig verstanden. Ich dachte, dass alle älteren Browser, die dass Einbinden mittels import nicht können auf die old.css gehen und alle anderen _nur_ die main.css verwenden?

Ich habe die Vorlage von hier.

ciao
romy

[MudGuard]

Hi,

Ups, da hab ich wohl noch was nicht richtig verstanden. Ich dachte, dass alle älteren Browser, die dass Einbinden mittels import nicht können auf die old.css gehen und alle anderen _nur_ die main.css verwenden?

Nein, jeder Browser krallt sich alles, was er kriegen kann ...

cu,
Andreas