• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS3 HTML5 Firefox 5 Problem beim Body mit Nutzung der Calc-Funktion

F

Fantasyelf

New member
Hallo,

erstmal, folgender Quellcode ist vorhanden:

index.html
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
	<title>{SITETITLE}</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="../templates/standard/css/main_admin.css" />
</head>
<body>
	<div id="overall">
		{TEXT}<br/>
	</div>
</body>
</html>

main_admin.css
HTML: 
@charset "utf-8";

*
{
	margin: 0px;
	padding: 0px;
}

html
{
	height: 100%;
}

body
{
	background: #000;
	border: 0px;
	height: 100%;
	color: #FFF;
	font-family: Verdana;
	text-align: center;
}

/* DIV - Formatierungen */

#overall
{
	background: #BBB;
	border: 10px solid #BBB;
	width: -moz-calc(100% - 60px);
	height: -moz-calc(100% - 60px);
	margin: 10px;
	padding: 10px;
	border-radius: 10px;
	color: #000;
	-moz-border-top-colors: #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA;
	-moz-border-bottom-colors: #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA;
	-moz-border-left-colors: #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA;
	-moz-border-right-colors: #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA;
	overflow: auto;
}

Einen Link kann ich leider nicht bieten, da ich XAMPP benutze.

Problembeschreibung:

Laut vorherigem Quelltext soll ein Haupt-DIV, egal bei welcher Browserfenstergröße, immer den maximalen Platz (minus 10px Rand an jeder Seite) einnehmen.
Das klappt auch sehr gut, selbst die Addons Webdeveloper und Firebug bestätigen das mit den korrekten Zahlen-Werten (Start oben mit 0/0 usw.).
Aber es ist immer ein vertikaler Scrollbalken zu sehen, der nicht da sein dürfte (und nervt :mad: ). Nach genauerer Suche und mithilfe von Firebug habe ich herausgefunden, das der BODY mit 10 Pixel Abstand von oben beginnt, trotz der Startkoordinaten 0/0. Das Kind-DIV wird aber nicht um 10 weitere Pixel nach unten verschoben, es wird korrekt angezeigt.
Mir scheint es fast, als liege der Fehler beim Firefox. Aber es ist wahrscheinlicher, das ich einen Fehler gemacht habe. Ich finde ihn nur nicht.
Deshalb würde ich mich freuen, wenn da mal ein Profi drüberschaut.

Hoffentlich kommt Ihr mit meiner Beschreibung klar, ich habe leichte Probleme mich verständlich auszudrücken. Bin halt Programmierer. ;)

Bearbeitet 19:32 Uhr: Hier ist ein Link zu einem Screenshot, der das besser verdeutlicht.

Gruß
Fantasyelf
 
Zuletzt bearbeitet:
margin ist manchmal echt seltsam:
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
	<title>{SITETITLE}</title>
	<meta charset="utf-8" />
	<style type="text/css">
	@charset "utf-8";

*
{
	margin: 0px;
	padding: 0px;
}

html
{
	height: 100%;
}

body
{
	background: #000;
	border: 0px;
	height: 100%;
	color: #FFF;
	font-family: Verdana;
	text-align: center;
}

/* DIV - Formatierungen */
#wrapper {
	height: -moz-calc(100% - 20px);
	padding: 10px;
}

#overall
{
	background: #BBB;
	border: 10px solid #BBB;
	width: -moz-calc(100% - 40px);
	height: -moz-calc(100% - 40px);/*
	margin: 10px;*/
	padding: 10px;
	border-radius: 10px;
	color: #000;
	-moz-border-top-colors: #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA;
	-moz-border-bottom-colors: #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA;
	-moz-border-left-colors: #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA;
	-moz-border-right-colors: #111 #222 #333 #444 #555 #666 #777 #888 #999 #AAA;
	overflow: auto;
}
	</style>
</head>
<body>
	<div id="wrapper">
	<div id="overall">
	</div>
	</div>
</body>
</html>
 
Vielen Dank für Deine Hilfe, kkapsner.
Darauf muß man erstmal kommen, das der Margin bei speziellen Fällen falsch angezeigt wird.
Nun bin ich um eine wichtige Erfahrung reicher. Bisher hatte immer alles geklappt.
 
Stimmt, das würde auch gehen.
Da ich aber später noch sowas verwende ( -moz-calc(100% - 210px) ), bleibe ich lieber bei einer Sache.
Die 210px sind die Breite eines <nav>-Bereichs plus rechtes padding und der Rest ist für den Content vorgesehen.
Der Admin-Bereich soll sehr dynamisch sein, was ja dank calc deutlich einfacher ist.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben