Clanintern Clanintern Clanintern

Forum

Öffentliche Foren
FORUM: Spiele & Computer THEMA: CSS margin und firefox klappt nicht
AUTOR BEITRAG
Solid

RANG Deckschrubber

#1 - 11.10 12:13

Ich habe mal folgendes stylesheet gebaut:

----------------

<style type="text/css">

#header {
width: 100%;
height: 264px;
background-color: #0000FF;
}

#cellright {
width: 100%;
height: 30px;
margin-top: 40px;
background-color: #FF0000;
}

</style>


<div id="header">
<div id="cellright">RECHTS</div>
</div>


-----------------

Damit hat der firefox Brwoser wohl ein Problem (oder ich kapiers nicht, ka...).

Und zwar soll er eigentlich den Abstand nach oben auf 40px setzen für das Element cellright IN dem Element header.

Das Problem ist:
Bei mir setzt er zwar den Abstand nach oben aber schon für das Element header so das cellright IN header ganz oben rangeklatscht ist und header 100px nach oben abstand hat zur generellen äh "Dokumentgrenze" oder wie man das nennt ^^

Habs getestet im IE siehts genau so aus wie ich es will...

Was mach ich falsch?
inta

RANG Master of Clanintern

#2 - 11.10 12:54

Informier dich mal über "collapsing margins" - wie eigentlich immer liegt der Firefox hier richtig

Hier ist das sehr schön erkärt: http://www.thestyleworks.de/basics/margins.shtml
Solid

RANG Deckschrubber

#3 - 11.10 17:08

Ah dankeschön!
Das hat mir schon sehr geholfen, ok dann Asche über mein haupt das ich den falschen angegangen bin hehe

Aber naja, jetzt hab ich ein ähnliches Problem (ich vermute mal das auch hier Firefox es wieder richtig macht).

Es geht um folgendes:

#cell_left {
background-color: #FF0000;
width: 150px;
height: 50px;
margin-top:100px;
margin-left: 200px;
float: left;
}

#cell_right {
background-color: #00FF00;
width: 100px;
height: 50px;
margin-top:100px;
}

<div id="container">
<div id="header">
<div id="cell_left">LINKS</div>
<div id="cell_right">RECHTS</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="footer_oben"></div>
<div id="footer_unten"></div>
</div>
</div>

Im Firefox sieht es vertauscht aus:
Links is rechts und umgekehrt, ebenso steht plötzlich das Wort "RECHTS" überhaupt nicht mehr in dem eingefärbten Kästchen...

Jetzt bin ich total verwirrt.
Woran liegt das nun wieder?
inta

RANG Master of Clanintern

#4 - 12.10 08:12

Ich verstehe ehrlich gesagt nicht was du mit deinen margins bezwecken willst.
So hauts hin:
code:
#cell_left {
    float: left;
    background-color: #ff0000;
    width: 150px;
    height: 50px;
}

#cell_right {
    background-color: #00ff00;
    width: 100px;
    height: 50px;
    margin-left: 200px;
}


Wenn du weitere Abstände festlegen willst, warum nutzt du dafür nicht #header?
Solid

RANG Deckschrubber

#5 - 12.10 20:30

Hm, also Header soll ne Hintergrundgrafik kriegen, die hat zwei vorgefertigte Zellen in die ich den Inhalt ausrichten muss, wenn ich header verschieb bringt mir das jetzt deshalb nichts, oder kann ich sozusagen für ein Element den Innenabstand zu einem äh Kindelement quasi auch angeben?

Wenn ichs richtig verstehe ist ja Margin der Abstand zum Elternelement??

Oder ists jetzt umgekehrt?
Hm... bin verwirrt.

Also habs jetzt so:

---------

#cell_left {
float: left;
background-color: #ff0000;
width: 251px;
height: 133px;
margin-left: 241px;
margin-top: 29px;
}

#cell_right {
background-color: #00ff00;
width: 251px;
height: 133px;
margin-left: 509px;
margin-top: 29px;
}
---------

Im Firefox siehts jetzt super aus,
im IE siehts jetzt auch FAST richtig aus (hachja...).
Dummerweise ist jetzt einfach alles zu weit nach rechts gerückt. :(

Was ist jetzt wieder falsch?
inta

RANG Master of Clanintern

#6 - 12.10 21:56

Ich empfehle dir, etwas über die Grundlagen zu lesen. Learning by doing ist ganz nett, aber ich habe das Gefühl dir fehlt ein bisschen die Basis.

Zu deinem konkreten Problem solltest du dir das Boxmodell ansehen. Dein Hintergrundbild des #headers erstreckt sich über den Content und das Padding (siehe Grafik Boxmodell-Link), also kannst du den Innenabstand mit Padding regulieren.

Anhand der Schnipsel dein Problem zu rekonstruieren ist recht anstrengend, ein Link wäre gut.
Solid

RANG Deckschrubber

#7 - 14.10 14:44

Padding hab ich versucht.

Klingt in der Theorie ja ganz gut, nur die Praxis bei Padding sieht irgendwie total anders aus:

Im IE scheints so zu funktionieren wie du sagst, im firefox verhält es sich anders, da scheint er #header um die höhe des Paddings zu verlängern und damit wiederholt sich die Grafik.

Wieso wird so ein Murks wie CSS eigentlich benutzt wenn die zwei gängigsten Browser anscheinend ein völlig unterschiedlichen Ansatz zur Interpretation haben :D

(Und das bei so grundliegenden Dingen wie Abständen, leuchtet mir irgendwie schwer ein)

Naja bin etwas verzweifelt gerade :D

Also hm, habs mal hochgeladen, zu sehen ist das derzeitige Ergebnis hier:

http://www.blacksphere.de/testdir/

Also wie gesagt im firefox Browser sieht der bisher fertige Teil schon gut aus, im IE ists bei mir nach rechts verschoben...

Werd nicht schlau daraus.

-----------

Hm als allgemeine Frage mal:

Kann es sein das ich besser gefahren wäre von Anfang an wenn ich einfach den header genommen hätte und die beiden "Fenster" in die sozusagen fester Inhalt sollte (zumindest feste Dimmensionen) einfach absolut positioniert hätte?

Also ich hab zwar schon ne ganze Menge Websiten gebaut, aber um ehrlich zu sein hab ich css bisher noch nie zur Positionierung von elementen benutzt, was ich jetzt mal ausprobieren wollte.

Find es doch irgendwo recht umständlich aktuell aber hab wohl auch nicht die einfachste Methode genutzt.
Dachte halt einfach Grafik drauf und dann alles mit Abständen regeln, aber wäre vermutlich besser gewesen einfach nen header dort die 2 Fenser absolut rein, dann nen skalierenden mittelteil (geht es Inhalt horizontal absolut auszurichten und in der vertikale skaliert er sich selbst?).
Footer ganz normal drunter.

Hm bin verwirrt. Wie macht man es am EINFACHSTEN? :D
inta

RANG Master of Clanintern

#8 - 14.10 19:28

quote:
Im IE scheints so zu funktionieren wie du sagst, im firefox verhält es sich anders, da scheint er #header um die höhe des Paddings zu verlängern und damit wiederholt sich die Grafik.

Das ist richtig so, padding wird zu der Breite/Höhe addiert (nochmal, lies dir die Infos zum Boxmodell durch und Frag wenn du es nicht verstehst ).

quote:
Wieso wird so ein Murks wie CSS eigentlich benutzt wenn die zwei gängigsten Browser anscheinend ein völlig unterschiedlichen Ansatz zur Interpretation haben

CSS ist kein Murks, ganz im Gegenteil. Für mich hört sich das sehr danach an, dass du kein valides HTML verwendest. Offensichtlich hast du keinen Doctype angegeben und schickst den IE somit in den Quirksmode.
Jag deine Seite mal durch den Validator.

Ich würde absolute Positionierung nur da verwenden, wo es unbedingt notwendig ist, damit wirst du sonst jede menge Probleme haben, da die Elemente aus dem Fluss der Seite genommen sind.