Layout-Problem in Mozilla-Browsern

mgn84 · #1 (**permalink**) 22.09.2005, 18:13

Hey hi,

nachdem mein Layout im IE nun endlich so aussieht, wie ich das haben will, zickt aber Mozilla wieder herum. Erstens nicht zentriert, zweitens fehlt der Balken in der Mitte!!

Wäre sehr nett wenn ich mal drüber schauen könntet: http://www.pca46.de

Vielen Dank schonmal, Gruß, Martin

cgdesign · #2 (**permalink**) 22.09.2005, 18:25

Hast du schon mal dran gedacht, ein ganzes div noch um alles divs zu legen und dieses mit margin: 0 auto; zu versehen?

mgn84 · #3 (**permalink**) 22.09.2005, 18:45

Hatte ich bisher nicht dran gedacht, bringt aber auch nichts, hab's eben probiert.

Hier noch eben mein CSS:

Code:

body, html {
	background-color: #3b4145;
	background-image: url(../images/fv.png);
	background-repeat: repeat-x;
	margin: 0pxo;
	padding: 0px;
	text-align: center;
	font-family: verdana;
	font-size: 7pt;
	color: #ffffff;
}

.centerbox {
	margin: 0 auto;
}

.headbox {
	width: 775px;
	margin: 25px 0px 10px 0px;
	color: #ffffff;
	font-size: 30px;
	text-align: right;
}

.mainbox {
	background-color: #9f9f9f;
	width: 763px;
	padding: 3px;
	border: #ffffff 3px solid;
}

.infobox {
	background-color: #ffffff;
	height: 415px;
	text-align: left;
	padding: 3px;
	font-family: tahoma;
	color: #9f9f9f;
	margin: 0px 0px 3px 0px;
}

.navibox {
	background-color: #ffffff;
	width: 320px;
	height: 415px;
	text-align: left;
	padding: 3px;
	font-family: tahoma;
	color: #9f9f9f;
	float: right;
	margin: 0px 0px 3px 0px;
	overflow: hidden;
}

.contentbox {
	background-color: #ffffff;
	width: auto;
	height: 150px;
	text-align: left;
	padding: 3px;
	font-family: tahoma;
	color: #9f9f9f;
	clear: right;
}

.footbox {
	width: 775px;
	margin: 3px 0px 50px 0px;
	color: #ffffff;
	font-size: 10px;
	text-align: right;
}

Wie gesagt, die centerbox hab ich grad erst eingefügt...

Gruß, Martin

The Doc · #4 (**permalink**) 22.09.2005, 19:06

.mainbox ein margin:0 auto;
.navibox ein border-left:3px solid #9f9f9f;

Tigereye · #5 (**permalink**) 22.09.2005, 19:09

Lad doch bitte mal das aktuelle HTML und die aktuelle CSS-Datei (mit .centerbox) hoch, damit man sich das anschauen kann.
edit: oder mach es einfach so wies der Doc sagt...

mgn84 · #6 (**permalink**) 22.09.2005, 19:27

Okay, ich hab jetzt den Tip vom Dok befolgt welcher auch SUPER im Mozilla funktioniert - aber - leider seine Probleme im IE mit sich zieht.

Jetzt ist es im IE so, dass der mittlere Balken 5px statt 3px dick ist und ich weiß nicht wieso...

Aber schonmal und nochmals besten Dank!

mgn84 · #7 (**permalink**) 22.09.2005, 22:15

Leute - ich brauch unbedingt eure Hilfe: Ich sehe den Fehler einfach nicht, oder die entscheidende Verbesserung, die die Darstellung in beiden Browsern (IE und FF) korrekt möglich macht.

Habe jetzt alles wieder zurückgeschraubt: Das heißt im IE sieht alles top aus, im FF fehlt der mittlere Balken, der wenn man .navibox border-left:3px solid #9f9f9f; macht zwar wiederkehrt, dafür im IE auch doppelt ist.

Was soll ich machen?!

Code:

body, html {
	background-color: #3b4145;
	background-image: url(../images/fv.png);
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
	text-align: center;
	font-family: verdana;
	font-size: 7pt;
	color: #ffffff;
}

.headbox {
	width: 775px;
	margin: 0 auto;
	padding: 10px 0px 5px 0px;
	color: #ffffff;
	font-size: 30px;
	text-align: right;
}

.mainbox {
	background-color: #9f9f9f;
	width: 763px;
	margin: 0 auto;
	padding: 3px;
	border: #ffffff 3px solid;
}

.infobox {
	background-color: #ffffff;
	height: 415px;
	text-align: left;
	padding: 3px;
	font-family: tahoma;
	color: #9f9f9f;
	margin: 0px 0px 3px 0px;
}

.navibox {
	background-color: #ffffff;
	width: 320px;
	height: 415px;
	text-align: left;
	padding: 3px;
	font-family: tahoma;
	color: #9f9f9f;
	float: right;
	margin: 0px 0px 3px 0px;
	overflow: hidden;
}

.contentbox {
	background-color: #ffffff;
	width: auto;
	height: 150px;
	text-align: left;
	padding: 3px;
	font-family: tahoma;
	color: #9f9f9f;
	clear: right;
}

.footbox {
	width: 775px;
	margin: 0 auto;
	color: #ffffff;
	font-size: 10px;
	text-align: right;
}

Code:

<body onload="preloadImages();">
	<div class="headbox">pca<span class="textH">46</span>.de</div>
	<div class="mainbox">
	  <div class="navibox">

	  </div>
	  <div class="infobox">
			--&gt; INFOBOX &lt;-- 
	  </div>
	  <div class="contentbox">
			--&gt; CONTENTBOX &lt;--
	  </div>
	</div>
    <div class="footbox"><span class="textF">Home | Galerie | Forum | Timer | Kontakte | Support</span>

Copyright &copy; pca46.de</div>
</body>

Also - ich danke im Voraus.

The Doc · #8 (**permalink**) 23.09.2005, 15:21

nimm am besten mal alle Border raus und schreib sie neu rein, dann kannst du nachvollziehen, wo der Fehler liegt.

und:

border: width style color;
border:1px solid #fff; (z.B., das machst du oft falsch)

mgn84 · #9 (**permalink**) 24.09.2005, 06:27

Hmm... ich komme einfach nicht dahinter, da ich (so glaube ich) sehr, sehr simpel programmiert hab. Dass heißt, in meinem Fall gibt es einen großen, grauen DIV-Layer mit einem weißen Rahmen (dessen Schreibweise ich mittlerweile auch korrigiert hab (Danke)). In dieser grauen Box befinden sich drei weitere, weiße Boxen. Die Trennlinien, nach unten und zur Zeite entstehen in meinem Fall nicht durch weitere Boarder-Tags, sondern durch Abstandhaltung (mittels margin), was nach unten hin optimal funktioniert. Nur in der Mitte (nach links oder rechts, je nachdem von welcher Seite man das sieht) will das (im z.B. Firefox) einfach nicht funktionieren!!!

Das ist jetzt wieder nen grundsätzliches Verständnisproblem, denn rein logisch gesehen MÜSSTE das auf JEDEN FALL funktionieren.

Wie seht ihr das?!

Gruß, Martin

Boris · #10 (**permalink**) 24.09.2005, 11:48

a) Ist HTML und CSS keine Programmiersprache, also kann man es auch nicht programmieren

b) Solltest du diesen ImageReady Slices Müll beseitigen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem beim 2 Layout Homepage	arek-1	CSS	13	03.08.2010 11:27
Layout Problem	AndyTrendy	CSS	6	02.08.2009 22:16
Layout Problem	smooth-graphics	CSS	3	08.08.2006 17:59
CSS in Mozilla Problem	blue	CSS	10	07.02.2005 19:53
problem mit css interpretation von IE - Opera - Mozilla	captain	CSS	2	03.03.2004 13:15