CSS - Mozilla

reemrev · 29.06.2005, 18:39

Vorgabe: 3 gleich breite, zentriert dargestellte Flächen im CSS-Code:

<html>
<head>
<style type="text/css">
body { background-color:#E0E0E0;
text-align: center;

}
.ft { font-family: verdana,arial,sans-serif; font-size:10px; font-color: #A0A0A0;
}
#kasten1 {
position: static;
height: 100px;
width: 800px;
margin: auto;
padding: 15px;
padding-top: 35px;
background-color: #C0C0C0;
text-align: left;
}
#kasten2 {
position: static;
height: 500px;
width: 800px;
margin: auto;
padding: 15px;
background-color: #C4C4C4;
text-align: left;
}
#menu {
position: static;
height: 200px;
width: 800px;
margin: auto;
background-color: orange;
text-align: left;
}
</style>
</head>

<body>
<div id="kasten1">
<span class="ft">hallo</span>
</div>
<div id="menu">wewe</div>
<div id="kasten2"></div>

</body>
</html>
Ergebnis: ich bekomme 3 gleich breite Flächen (IE & Mozilla)
Wenn ich in #menu die Höhe auf 20px reduziere, zeigt IE alles korrekt an, Mozilla verschmälert die Breite.
Woran liegt's.

pong · 29.06.2005, 19:18

Wie möchten relative Angaben verwenden und einen Validator nutzen

pong

reemrev · 29.06.2005, 19:24

Bei relativen Angaben hätt ich dann noch eine Frage, dazu später. Wenn ich die static Anweisung rausnehme, funktionierts auch nicht.
Was passt sonst nicht, hab das aus einem Buch übernommen.

sagi · 29.06.2005, 19:38

Zitat:

zeigt IE alles korrekt an

nein.

Mozilla zeigt es korrekt an (wenn wir uns darauf einigen können, dass mit "korrekt" entsprechend des W3C Standards gemeint ist)

Das Problem wird hier beschrieben:
http://css4you.de/wsboxmodell/index.html#browser

Es geht darum, ob "padding" in "width" enthalten ist oder nicht.

mfg
c.

sagi · 29.06.2005, 19:38

Zitat:

static Anweisung rausnehme

static ist der default Wert (üblicherweise)

reemrev · 29.06.2005, 20:18

Gut, wenn ich die padding-Eigenschaft rausnehme, gehts. Sieht aber nicht wirklich hübsch aus, wenn alles am Rand pickt.

pong · 29.06.2005, 20:27

Zitat:

Original geschrieben von reemrev
Gut, wenn ich die padding-Eigenschaft rausnehme, gehts. Sieht aber nicht wirklich hübsch aus, wenn alles am Rand pickt.

Dann zentriere das Ganze doch
http://www.css-technik.de/details/70/9/CSS-Snippets.htm

pong

reemrev · 29.06.2005, 20:45

Danke vorerst für die Links, werde mich mal weiterspielen

sagi · 29.06.2005, 20:56

Du kannst 2 DIVs ineinander verschachteln und beim inneren "margin" einstellen.

reemrev · 30.06.2005, 19:00

Also, ich will ja nicht nerven, aber warum sieht das im IE (auch wenns falsch sein sollte

) richtig im Sinne "so will ich's" und im Modzilla nicht?

diese Seite

29.06.2005, 18:39	#1
reemrev Inventar Registriert seit: 31.01.2000 Beiträge: 1.706 Mein Computer	CSS - Mozilla Vorgabe: 3 gleich breite, zentriert dargestellte Flächen im CSS-Code: <html> <head> <style type="text/css"> body { background-color:#E0E0E0; text-align: center; } .ft { font-family: verdana,arial,sans-serif; font-size:10px; font-color: #A0A0A0; } #kasten1 { position: static; height: 100px; width: 800px; margin: auto; padding: 15px; padding-top: 35px; background-color: #C0C0C0; text-align: left; } #kasten2 { position: static; height: 500px; width: 800px; margin: auto; padding: 15px; background-color: #C4C4C4; text-align: left; } #menu { position: static; height: 200px; width: 800px; margin: auto; background-color: orange; text-align: left; } </style> </head> <body> <div id="kasten1"> <span class="ft">hallo</span> </div> <div id="menu">wewe</div> <div id="kasten2"></div> </body> </html> Ergebnis: ich bekomme 3 gleich breite Flächen (IE & Mozilla) Wenn ich in #menu die Höhe auf 20px reduziere, zeigt IE alles korrekt an, Mozilla verschmälert die Breite. Woran liegt's.

29.06.2005, 19:18	#2
pong Inventar Registriert seit: 25.12.2000 Alter: 41 Beiträge: 9.063 Mein Computer	Wie möchten relative Angaben verwenden und einen Validator nutzen pong ____________________________________ \"Ein Gewitter reinigt die Luft\", sagte der Mann, nachdem ein Blitz seine Frau erschlug Nicht klicken! Erstposteralarm/Beschwerde/Kummerkasten Verplattet

29.06.2005, 20:56	#9
sagi Elite Registriert seit: 08.11.2001 Alter: 42 Beiträge: 1.285	Du kannst 2 DIVs ineinander verschachteln und beim inneren "margin" einstellen. ____________________________________ www.sagmueller.net Freedom - use it or lose it (Lawrence Lessig) Im übrigen bin ich der Meinung, dass Microsoft zerschlagen werden muss.

29.06.2005, 19:24	#3
reemrev Inventar Registriert seit: 31.01.2000 Beiträge: 1.706 Mein Computer	Bei relativen Angaben hätt ich dann noch eine Frage, dazu später. Wenn ich die static Anweisung rausnehme, funktionierts auch nicht. Was passt sonst nicht, hab das aus einem Buch übernommen.

29.06.2005, 20:18	#6
reemrev Inventar Registriert seit: 31.01.2000 Beiträge: 1.706 Mein Computer	Gut, wenn ich die padding-Eigenschaft rausnehme, gehts. Sieht aber nicht wirklich hübsch aus, wenn alles am Rand pickt.

29.06.2005, 20:45	#8
reemrev Inventar Registriert seit: 31.01.2000 Beiträge: 1.706 Mein Computer	Danke vorerst für die Links, werde mich mal weiterspielen

30.06.2005, 19:00	#10
reemrev Inventar Registriert seit: 31.01.2000 Beiträge: 1.706 Mein Computer	Also, ich will ja nicht nerven, aber warum sieht das im IE (auch wenns falsch sein sollte ) richtig im Sinne "so will ich's" und im Modzilla nicht? diese Seite

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)